精华内容
下载资源
问答
  • HTML背景图片设置

    千次阅读 2020-02-19 22:02:06
    背景:学习前端知识,自己做页面 ...简介:HTML背景图片设置; HTML背景图片设置background-image: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>...

    背景:学习前端知识,自己做页面
    目的:学习前端知识
    组网图:不涉及
    工具:vscode1.41.0
    简介:HTML背景图片设置;
    HTML背景图片设置background-image:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            body {
                background-image: url("imgs/btn1.png");
            }
        </style>
    </head>
    <body>
        
    </body>
    </html>
    

    在这里插入图片描述
    HTML背景图片设置 background-repeat:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>love</title>
        <style>
            body {
                background-image: url("imgs/btn1.png");
                background-repeat: no-repeat;
            }
        </style>
    </head>
    <body>
        
    </body>
    </html>
    

    在这里插入图片描述
    HTML背景图片设置background-size:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>love</title>
        <style>
            body {
                background-image: url("imgs/btn1.png");
                background-repeat: no-repeat;
                /* background-position: center; */
                background-size: 100px;
            }
        </style>
    </head>
    <body>
        
    </body>
    </html>
    

    在这里插入图片描述
    HTML背景图片设置代码演练:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>love</title>
        <style>
            #box {
                text-align: center;
            }
            a {
                display: inline-block;
    
                width: 160px;
                height: 40px;
    
                background-repeat: no-repeat;
                background-size: 100%;
            }
            #btn1 {
                background-image: url("imgs/btn1.png");
            }
            #btn2 {
                background-image: url("imgs/btn2.png");
            }
            #btn3 {
                background-image: url("imgs/btn3.png");
            }
            #btn4 {
                background-image: url("imgs/btn4.png");
            }
        </style>
    </head>
    <body>
        <div id="box">
            <a id="btn1" href="#"></a>
            <a id="btn2" href="#"></a>
            <a id="btn3" href="#"></a>
            <a id="btn4" href="#"></a>
        </div>
    
    </body>
    </html>
    

    在这里插入图片描述

    展开全文
  • html背景图片自适应窗口大小

    万次阅读 多人点赞 2019-05-06 19:14:05
    会把图片拉伸至足够大,但是背景图片有些部分可能显示不全 #bgImg { height: 100%; width: 100%; background: url('../img/bg/snow.jpg') no-repeat; background-size: cover; position: absolu...

    html 图片自适应窗口大小

    background-size:cover
    会把图片拉伸至足够大,但是背景图片有些部分可能显示不全

    #bgImg {
      height: 100%;
      width: 100%;
      background: url('../img/bg/snow.jpg') no-repeat;
      background-size: cover;
      position: absolute;
      overflow: hidden;
    }
    

    效果
    大窗口
    在这里插入图片描述
    小窗口
    在这里插入图片描述
    background-size:contain
    把图片拉伸至最大,完全显示图片
    大窗口
    在这里插入图片描述
    小窗口
    在这里插入图片描述

    展开全文
  • html背景图片拉伸解决办法

    千次阅读 2020-09-29 16:07:17
    html背景图片拉伸解决办法 body { background-size: 100% 100%; //关键代码,直接拉伸背景图 background-image: url("img/99.jpg") ; //背景图导入 background-repeat: no-repeat; //不重复拉伸 background-...

    html背景图片拉伸解决办法

    body {
                background-size: 100% 100%;  //关键代码,直接拉伸背景图
                    background-image: url("img/99.jpg") ; //背景图导入
                    background-repeat: no-repeat;  //不重复拉伸
                    background-attachment: fixed;//此代码用于页面内容超出屏幕,右侧出现滚动条情况,使得滚动滚动条时背景锁定
                }
    

    需要注意的是:

    background-size: 100% 100%; //关键代码,直接拉伸背景图

    如果你的页面内容超过一页,那么背景拉伸会拉很长不好看,建议使用

    background-attachment: fixed;

    作用是图片只拉伸到当前一页屏幕大小,内容超出一夜后,滚动滚动条值会滚动内容,背景图不动

    展开全文
  • html设置背景图片自适应

    万次阅读 多人点赞 2019-04-25 17:53:47
    在网上找了很久,终于在一个百度问答里找到正确答案,记录下来,方便以后使用。 在<body>中设置: <body background="images\bg.jpg" style=" background-repeat:no-repeat ;...第一行是图片...

    在网上找了很久,终于在一个百度问答里找到正确答案,记录下来,方便以后使用。
    <body>中设置:

    <body background="images\bg.jpg"
    style=" background-repeat:no-repeat ;
    background-size:100% 100%;
    background-attachment: fixed;"
    >
    

    第一行是图片url
    第二行是背景图片不重复
    第三行是达到窗口的百分百比例
    第四行是图片固定,随着页面滚动而移动

    展开全文
  • html背景图片自适应

    千次阅读 2019-07-12 11:07:47
    DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text...
  • html背景图片固定代码

    万次阅读 2019-04-29 19:53:30
    今天河北魅力网络客户让改一下代码,让背景图片实现不随滚动条来滚动,实现这种效果其实很简单,加个代码就行。<body background="bj.jpg" style="background-attachment:fixed";>style="background-...
  • HTML背景图片是否随滚动轴移动

    千次阅读 2020-01-05 15:38:48
    使用background-attachment可定义背景图片随滚动轴的移动方式。 1、background-attachment:scroll 随着页面滚动轴背景图片也会随之移动。 2、background-attachment:fixed 随着页面滚动轴背景图片静止不动。 3、...
  • html背景图片设置百分比

    万次阅读 2018-10-22 09:26:48
    html背景图片设置百分比 background-size: cover; //把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。 //背景图像的某些部分也许无法显示在背景定位区域中。 background-size: contain; //把图像图像...
  • HTML背景图片自适应全屏幕

    千次阅读 2020-01-03 10:23:34
    margin: 0px; background-image: url(/resource/error-bg.png); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%;
  • 关于html 背景图片的引用格式

    千次阅读 2018-11-12 19:01:54
    //引用电脑上的图片 &lt;html&gt; &lt;body background="file:///C|/Users/fox/Desktop/釜山.jpg"&gt; &lt;h3&gt;图像背景&lt;/h3&gt; &lt;p&gt;gif 和 jpg ...
  • 安利一个很棒的html背景图片网站

    万次阅读 多人点赞 2018-07-31 16:18:37
    这里面有许多简洁的html背景界面,对,重要的是简洁,而且很好看,very nice: https://www.toptal.com/designers/subtlepatterns/ 可能需要梯子。 网站提供一键预览:      ...
  • HTML背景图片的相对位置设置

    千次阅读 2018-10-30 09:48:00
    链接:https://jingyan.baidu.com/article/ff42efa9c22b11c19e220200.html ...首先我们需要插入一张图片,并且图片只出现一次,并设计图片出现的位置在左上角,可以按照如下代码来完成: <html>...
  • Html设置网页背景图片

    万次阅读 多人点赞 2015-11-29 21:17:48
    为网页添加背景图片可以衬托网页的显示效果,从而取得更好的视觉效果。背景图片的选择不仅要注意好看,而且还要注意不能喧宾夺主,影响网页内容的阅读。通常使用深色的背景图片配合浅色的文本,或者浅色的背景图片...
  • html中 一个全黑的背景样式 background:#000; 然后我想在套一个背影 是一个图片 50px左右 居中 把黑色覆盖掉 其他还是黑色的 然后在图片上插入input等标签 做一个登录界面 这个想法可行么 如果可行 希望有人帮助...
  • html背景图片定位方法

    千次阅读 2016-02-14 00:39:12
    方法:采用两个table嵌套的方式,这样可以适合多种分辨率的屏幕。...具体方法:将一张图片使用抠图工具将文字抠出作为里面table的background, 而无文字的那张图片作为外面table的background。
  • HTML背景图片透明度设置

    万次阅读 2017-12-18 20:11:45
    html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> title>无标题文档title> style type="text/css"> .STYLE5 {color: #000000} ....
  • html背景图片自适应浏览器大小方法

    万次阅读 2018-05-17 21:31:26
    &lt;div id="Layer1" style="position:fixed;z-index:-100; left:0px; top:0px; width:100%; height:100%"&gt; &lt;img src="/static/show_schedule/img/bg_mm_1.jpg&.../&am
  • 为什么html背景图片路径都设置好了还显示不出来?应该怎么设置一下就可以显示出来了呢?急急急。各位大神帮帮忙。
  • body{background-image: url("/i/bg_flower.gif");background-position: center center; background-repeat: no-repeat; background-attachment: scroll; background-size: 100% auto;width:100%;...
  • html背景图片如何自适应窗口大小

    千次阅读 2021-06-18 09:37:32
    本篇文章给大家介绍html背景图片自适应窗口大小的方式。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 background-size:cover 会把图片拉伸至足够大,但是背景图片有些部分可能显示不全 ...
  • HTML设置背景颜色及背景图片

    千次阅读 2020-08-26 23:17:27
    - 可以同时设置背景图片和背景颜色,这样背景颜色将会成为图片的背景色 - 如果背景的图片小于元素,则背景图片会自动在元素中平铺将元素铺满 - 如果背景的图片大于元素,将会一个部分背景无法完全显示 - 如果背景...
  • ****刚开始学html的时候,就遇到了这个问题,给body设置背景图片无法显示,或者显示不正确,要么大,要么小,有时候好会有重复! body{ background-image: url(./image/ba2.jpg); //图片路径 background-size: ...
  • HTML背景图片拉伸铺满 CSS实现

    万次阅读 2013-08-29 10:37:05
    上代码: CSS代码 ...IE9, Firefox, Chrome, ...这样子,就实现了背景图片的拉伸展示,而不管图片尺寸是否正好,img的width和height都设置成100%,就解决了图片不拉伸铺满的问题。 scroll=no是取消滚动条
  • html背景图片随分辨率自适应

    千次阅读 2014-07-30 22:26:17
    我们在写html的时候,可能需要设置一个背景图片,但是不同的电脑,屏幕分辨率不同,如果我们把这个背景图片裁切到在A电脑上正好铺满屏幕(或者我们想要的大小),但是却未必会在B电脑上也铺满屏幕,因为两台电脑的...
  • HTML设置背景图片

    万次阅读 2019-05-18 11:54:10
    //auto:自动判断,一般出来的效果是,不重复,以长宽中较大的为标准放缩图片 //contain:不重复,以长宽中较小的为标准放缩图片 //cover:以长宽中较大的为标准显示图片,不放缩,小了会留白,大了会隐藏
  • HTML页面背景图片平铺

    万次阅读 多人点赞 2018-05-31 16:06:29
    body { background-image: url('图片路径'); background-size: 100%; background-repeat:no-repeat;}
  • html背景图片居中显示

    千次阅读 2012-11-06 22:20:09
    无标题文档 body{background-image: URL(bgimg2.jpg); background-position: center; background-repeat: no-repeat; background-attachment: fixed;} ...背景图片居中显示...
  • HTML设置背景图片是否重复

    千次阅读 2020-01-05 15:28:03
    在css中,background-repeat可设置图片是否重复及如何重复。 1、background-repeat:repeat是默认属性,设置该属性使图片在水平与垂直方向上重复。 2、background-repeat:no-repeat 图片仅显示一次。 3、background-...
  • 讲解如何在HTML中添加背景图片?

    万次阅读 多人点赞 2021-01-13 14:33:22
    HTML中,我们可以使用两种不同的方法在HTML网页上显示背景图片: 使用背景属性(HTML标签) 使用CSS内部样式表 提示:HTML 5不再支持标签的background属性,建议使用CSS在Html文档中添加背景图片。 使用背景属性 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 250,288
精华内容 100,115
关键字:

html背景图片