<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. 01_初识redis

    1.redis和mysql mysql是一个软件,帮助开发者对一台机器的硬盘进行操作. redis是一个软件,帮助开发者对一台机器的内存进行操作 汽车之家,如果硬盘挂掉了,页面还能访问1个月 关键字: ...

  2. Codeforces Round #456 (Div. 2) 912D D. Fishes

    题: OvO http://codeforces.com/contest/912/problem/D 解: 枚举每一条鱼,每放一条鱼,必然放到最优的位置,而最优位置即使钓上的概率最大的位置,即最多的r ...

  3. POJ1961 Period && POJ2604 Power Strings 字符串循环节

    两道题都是求循环节的...但是一道是学哈希时做的,另一道是学$KMP$时做的 POJ2604 用的哈希...枚举长度的因数作为循环节的长度,然后暴力算出所有循环节位置的哈希值,看看是否相等. #inc ...

  4. O(1)快速乘与O(log)快速乘

    //O(1)快速乘 inline LL quick_mul(LL x,LL y,LL MOD){     x=x%MOD,y=y%MOD;     return ((x*y-(LL)(((long d ...

  5. [Luogu] 次小生成树

    https://www.luogu.org/problemnew/show/P4180#sub 严格次小生成树,即不等于最小生成树中的边权之和最小的生成树 首先求出最小生成树,然后枚举所有不在最小生成 ...

  6. C++类中函数（构造函数、析构函数、拷贝构造函数、赋值构造函数）

    [1]为什么空类可以创建对象呢? 示例代码如下: #include <iostream> using namespace std; class Empty { }; void main() ...

  7. Docker 数据管理（Volumes）

    Docker 容器产生的数据在可写层,如果不通过 docker commit 生成新的镜像,使得数据成为镜像的一部分保存下来,那么当容器删除后,数据自然也就没有了. Docker 提供了三种数据 Mo ...

  8. PHP-生产随机验证码图片

    // <span style="white-space:pre"> </span>//因为要把产生的验证码保存到session中,此处为session开始 ...

  9. PHP学习之验证码类

    <?php $code = new Code(); $code->outImage(); class Code { //验证码个数 protected $number; //验证码类型 p ...

  10. C++ STL——map和multimap

    目录 一 map和multimap 注:原创不易,转载请务必注明原作者和出处,感谢支持! 一 map和multimap map相对于set的区别:map具有键值和实值,所有元素根据键值自动排序.pai ...