<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. Maven 配置问题 - could not find resource mybatis-config.xml

    需要在pom中加入以下代码 <build> <resources> <resource> <directory>src/main/resources&l ...

  2. windows 查看端口占用和杀死进程

    在windows命令行窗口下执行:C:\>netstat -aon|findstr "3306" 如上图,端口被进程号为5056的进程占用,继续执行下面命令:C:\>t ...

  3. React组件式编程Demo-用户的增删改查

    1.项目结构 项目是基于webpack4, 参考 创建基本的webpack4.x项目 2.页面效果 初始化效果

  4. end()

    end() V1.0概述 回到最近的一个"破坏性"操作之前.即,将匹配的元素列表变为前一次的状态. 如果之前没有破坏性操作,则返回一个空集.所谓的"破坏性"就是 ...

  5. 二维DFT

    学习DIP第4天 傅里叶变换数学原理会在后续完整介绍,目前只实现代码,观察下结果,公式在上一篇博客中已经描述 内容迁移至 http://www.face2ai.com/DIP-2-2-二维DFT/ h ...

  6. node中从express到koa再到koa2的发展历程

    koa是Express的下一代基于Node.js的web框架,目前有1.x和2.0两个版本. 历史 1. Express Express是第一代最流行的web框架,它对Node.js的http进行了封 ...

  7. js监听页面标签切换

    var OriginTitile = document.title, titleTime; document.addEventListener('visibilitychange', function ...

  8. 7.19T2

    小 B 的树 题目背景及题意 小 B 有一颗树,它的形态与 OI 中的树相同,有 n 个节点,n-1 条边,每条边长度为 1 随着时间的流逝这棵树长大了,每条边有 50%的概率长度变为 2  小 B ...

  9. Python实用黑科技——解包元素(2)

    需求: 前面的文章讲的是使用变量的个数需要和迭代器数据变量的元素个数相同的方法,但更多的时候确实不想根据元素个数n来定义相应多的变量,而是希望用较少的变量( def drop_first_last(g ...

  10. Mybatis源码学习之DataSource（七）_1

    简述 在数据持久层中,数据源是一个非常重要的组件,其性能直接关系到整个数据持久层的性能.在实践中比较常见的第三方数据源组件有Apache Common DBCP.C3P0.Proxool等,MyBat ...