背景图片自适应

<body style="background-color:#d43167">     <div style="position: absolute;z-index: -1; top:0px; left:0px;width: 100%; " ><img src="img/bg.png " width="100%" height="100%"/></div>     <div style="position: absolute;z-index: 1;width: 80%;margin-top: 10%; left:10%"><img src="img/logo2.png" width="100%" height="100%" /></div></body>

之前看见在div里面用了height：100%的，但是要注意的是：如果父级没有设置高度这个属性是用不上的，这时候如果你div里面又没有放东西，是没有显示效果的，只会显示背景色：


所以要解决这个问题（不用js方法的话），一是：可以事先设置好父级的高度，二是：在里面放足够的元素；撑起div的高，再用合适的margin；padding；元素的height撑到自己想要的高度，如果不想用px设置，可以用百度比设置如：margin-top：10%；

在用百分比让元素居中的方法：position：absolute：top：50%；margin-top:-(元素高度)/2；left：50%；margin-left:-(元素宽度)/2；

时间： 2024-08-11 03:36:15

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

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

<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&

基于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

div背景图片自适应

在为文莱的一个天气预报网站做页面,突然遇到一个问题,就是需要div的背景图片自适应屏幕大小,网上找了好久,chrome都无效,最后找到了一个,说要这么写 .product_wx { background:url('../images2/bgd_1.jpg'); filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale'); -moz-background-size:100% 100%; backgr

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

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

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

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

设置背景图片自适应

.body { background-size: cover; overflow: hidden; } 设置背景图片完全显示,不会缺少一部分原文地址:https://www.cnblogs.com/bchange/p/9182248.html

背景图片自适应浏览器大小

解决办法: 1.使用div,设置z-index为负数,并使此div大小为整个body的大小: 2.div里放个<img>标签,显示图片: 3.body标签的background属性去掉具体见代码: <div style="position:absolute; width:100%; height:100%; z-index:-1;"> <img src="img/bg_home.png" height="100%&q

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

1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个body大小,在div里用<img> 3.body的background属性去掉,要不然会被遮住例子: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> &l

背景图片自适应大小

如果图片比较大,比如200x200, 那么显示的图片会随着input type="image" 的 width/height变化 <input type="image" style="width:20px;height:20px;" src="../../../Images/xxx.png">

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

由于<body>标签的图片不能够拉伸, 解决办法: 1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个body大小,在div里用<img> 3.body的background属性去掉,要不然会被遮住 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/