div背景图片自适应

在为文莱的一个天气预报网站做页面,突然遇到一个问题,就是需要div的背景图片自适应屏幕大小,网上找了好久,chrome都无效,最后找到了一个,说要这么写

.product_wx {
	background:url('../images2/bgd_1.jpg');
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale');
	-moz-background-size:100% 100%;
        background-size:100% 100%;
}

照样子写上去后,发现chrome还是不显示,于是加上了height,图片才可以正常缩放,值得注意的是如果用 width:100%;也是无效的。所以最终结果是

.product_wx {
	background:url('../images2/bgd_1.jpg');
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale');
	-moz-background-size:100% 100%;
        background-size:100% 100%;
	height:858px;
}

# 以上结果都是在chrome下测出。

时间: 2024-10-04 01:08:51

div背景图片自适应的相关文章

背景图片自适应分辨率浏览器大小自动拉伸全屏代码

<div id="web_bg" style="position:absolute; width:100%; height:100%; z-index:-1"> <img style="position:fixed;" src="http://a.lanyes.org/bg1.jpg" height="100%" width="100%" /> </div&

div嵌套div 背景图片 不显示的问题

这几天 在做一个小Demo的时候碰到了如上的问题,一个DIV嵌套多个DIV时,父容器DIV不显示背景图片.同时结合之前碰到类似的问题,我归纳了如下几个解决方法: 1.就是常见的 子div 背景把父div的背景给盖住了,例子: 该例子就是 我有一个父div 和它里面嵌套的一个子div,两个div的宽度和高度大小是一样的,其中父div的背景图片就是上面这张图片(箭头部分是透明的),子div的背景图片是那种渐变灰色图片,其实懂英语的人应该看出来了就是,我想实现一个那种类似于iphone滑动那种灯光从

基于html5背景图片自适应代码

基于html5背景图片自适应代码是一款背景不随滚动条滚动,会根据分辨率不同自动匹配对应的背景图片.效果图如下: 在线预览   源码下载 实现的代码. css代码: .jawbone-hero .jawbone-hero-image { position:absolute; background:transparent none no-repeat scroll 50% 0; background-size:cover; top:0; bottom:0; left:0; right:0; widt

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

一.一种比较土的方法,<img>置于底层. 方法如下: CSS代码: img{ position:absolute; z-index:-10;width:50%;} HTML: <img src="背景图片路径" /> <span>字在背景上</span> 此时,背景可以自动伸缩,不过底层图片和上面的字是无关联的,想要在屏幕变化的情况下保持二者对应关系不变,需要用百分比表示间距和尺寸.    这种方法可以实现,但是个人感觉不太规范,但当时

div背景图片或颜色不显示的解决办法

背景图片不显示的原因: 1. css没有被调用 2. css图片地址不对 3. div的高度没有固定,是auto.没有设值或者高度不够 4. div被嵌套 5. div代码不规范 解决办法: (1)DIV高度为自动,背景颜色无法显示,在代码中将原代码height:auto; 改为height:100%; overflow:hidden;!important:同时还可以兼容 IE6.7.8和谷歌火狐. (2)假设对一个对象设置了background背景颜色样式,该对象内部盒子有使用float浮动属

css控制div下图片自适应解决方法:图片不超过最大宽度

我们(特别是像我一样的菜鸟)经常会遇到一个问题——图片自适应.这个问题是很普遍的.在文章区,在论坛,可以这么说:哪儿需要上传图片,哪儿就存在这个问题,而论坛上也不时有人询问.为什么?原因很简单,我们不能要求网页编辑或者你的论坛会员都会裁剪图片或者了解最基本的html代码——尽管这并没有多少技术含量. 以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐.还有一种是在外部容器定义over-flow:hidden.但这种办法只会切割图片而不会自动适用. 下面的办法的出现应该感谢伟大的c

js 定时更改div背景图片

今天遇到一个业务场景,使用js将一个div标签的背景图片定时更换一下. 之前百度了几个,有css+js,也有css3的,不过css3的兼容有问题,之后同事提示,可以使用js直接来更换div的北京图片,不使用css+ul+il的形式. 推荐的阅读https://blog.csdn.net/woyizhidouzai0505/article/details/41176565?utm_source=blogxgwz1 这个博客写的很好,用的也是这个方法. 下面写两种情况: 第一种是先规定几张图片,随机

背景图片自适应(2):慕课网首页头部结构

最近经常出没慕课网,本以为是类似我前面写的那种JS计算的全屏背景,今天细细一想...不可能是那种,表现并不一样.就细细看了下结构 首先说一下代码里的left top right bottom:0 这样写,这样做等于分别设置了四个边的位置都是紧贴边框,从而实现一直全屏的效果.四个属性缺一不可. 而background-size:auto 100%; 则让背景图片相对于父容器高度百分百. 然后再给该元素父层设置背景颜色,颜色值为与图片边缘颜色一致. 父层元素,高度等于100%; 最大高度950px;

ie8 div背景图片单击无效

最近使用背景图片做了个展开和关闭的样式如下: .iconcut { background: url("images/iconBg01.gif") no-repeat left -248px; height: 16px; width: 16px; display: inline-block; margin: 6px; float: left; } 效果出来如下: 但是在ie8下面怎么点击都不会展开,添加防止冒泡代码e.stopPropagation();  还是不行. 后来修改样式, .