<body>

<div>

    <!--背景图片-->

    <div id="web_bg" style="background-image: url(./img/bg.jpg);"></div>

    <!--其他代码 ... -->

</div>

</body>

以上是需求代码

以下是实现css样式代码

#web_bg{

  position:fixed;

  top:;

  left:;

  width:100%;

  height:100%;

  min-width: 1000px;

  z-index:-10;

  zoom:;

  background-color: #fff;

  background-repeat: no-repeat;

  background-size: cover;

  -webkit-background-size: cover;

  -o-background-size: cover;

  background-position: center 0;

}

通过以上操作，我们可以实现将一张图片作为网页背景，且不会因为浏览器的尺寸导致留白和重复

前端CSS实现图片自适应背景大小的更多相关文章

  1. pyqt5：图片自适应QLabel大小和图片移除

    参考链接: https://www.e-learn.cn/content/qita/669569 图片自适应QLabel大小 # coding=utf- import sys from PyQt5.Q ...

  2. css 背景图片自适应元素大小

    一.一种比较土的方法,<img>置于底层. 方法如下: CSS代码: HTML: <img src="背景图片路径" /> <span>字在背景 ...

  3. css控制图片自适应大小

    相信大家做网页时经常会碰到大分辨率的图片会把表格涨破以致漂亮的网页面目全非,但只要使用以下的CSS语句即可解决.      该CSS的功能是:大于600的图片自动调整为600显示. <style ...

  4. css -- 背景图片自适应屏幕大小

    由于<body>标签的图片不能够拉伸, 解决办法: 1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个bod ...

  5. html/css背景图片自适应分辨率大小

    <style type='text/css'> .bgbox { position: absolute; left: 0; top: 0; width: 100%; overflow: h ...

  6. css 背景图片自适应分辨率大小 兼容

    拉伸,all浏览器兼容.bg{     background:url(http://wyz.67ge.com/wp-content/uploads/qzlogo.jpg);     filter:&q ...

  7. HTML中使背景图片自适应浏览器大小

    由于<body>标签的图片不能够拉伸, 解决办法: 1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个bod ...

  8. 设置图片自适应DIV大小

    可以利用CSS样式表中表示后代的复合选择器进行设置.例: <head> <style type="text/css"> #right img /*设定box ...

  9. picturefill + picture 标签 实现兼容性很棒的 响应式图片 自适应 屏幕大小

    polyfill 它是一个能够补齐浏览器兼容性问题的一个东西,使用到的<picture></picture>标签 ,并不是所有浏览器都支持,为了实现更好的兼容效果,这里就使用到 ...

随机推荐

  1. Springboot项目关闭Httpclient的Debug日志

    今天在做httpclient测试时,发现控制台打印了好多请求相关的信息,如何去掉这些不打印? (2)在配置文件包下加入logback.xml文件,文件内容如下: <?xml version=&q ...

  2. 第二个爬虫之爬取知乎用户回答和文章并将所有内容保存到txt文件中

    自从这两天开始学爬虫,就一直想做个爬虫爬知乎.于是就开始动手了. 知乎用户动态采取的是动态加载的方式,也就是先加载一部分的动态,要一直滑道底才会加载另一部分的动态.要爬取全部的动态,就得先获取全部的u ...

  3. HDU 6068 - Classic Quotation | 2017 Multi-University Training Contest 4

    /* HDU 6068 - Classic Quotation [ KMP,DP ] | 2017 Multi-University Training Contest 4 题意: 给出两个字符串 S[ ...

  4. C++Error2208:...尝试引用已删除的函数

    C++Error2208:…尝试引用已删除的函数在使用自己编写的类实例化c++stl容器vector时,调用了vector.erase()方法,结果编译器报了以下错误 错误 C2280 “(类名):: ...

  5. CMake编译OpenCV

    使用CMake来编译OpenCV,以匹配自己使用的VS版本. 主要有两步: CMake编译OpenCV源码得到OpenCV.sln工程文件. VS编译OpenCV.sln. 以最新的cmake-3.1 ...

  6. 牛客练习赛52 B题【树状数组维护区间和{查询区间和，如果区间元素重复出现则计数一次}】补题ing

    [题目] 查询区间和,如果区间元素重复出现则计数一次. 链接:https://ac.nowcoder.com/acm/contest/1084/B [题解] 将询问按r排序,维护每个数最后出现的位置, ...

  7. CSRF（跨站请求伪造）

    跨站请求伪造(Cross-site request forgery)是一种冒充受信任用户,向服务器发送非预期请求的攻击方式. 攻击的前提是: 用户已经登录过某网站. 攻击者通过一些诱惑性的标题,诱惑用 ...

  8. ZOJ - 4114 Flipping Game

    ZOJ - 4114 Flipping Game 题目大意:给出两个串s,t,n个灯泡的序列,1代表开着,0代表关着,一共操作k轮,每轮改变m个灯泡的状态,问最终能把s串变成t串的方案数. 坤神题解. ...

  9. Java基础线程系列大纲

    ## Java 多线程之 线程创建 ## Java 多线程之 Sleep ## Java 多线程之 Join ## Java 多线程之 生命周期 ## Java 多线程之 wait, notify a ...

  10. 21.栈的压入、弹出序列 Java

    题目描述 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否可能为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2,1是该压 ...