背景图片适应屏幕大小的一些方法
想要背景图片适应屏幕的大小,背景图片要足够大,可以铺满常用的所有屏幕,还要图片要高清,不能一拉伸就失真,不能显示局部的时候显得很怪异。
方法一: 运用ul的宽度自适应特性
<title>运用ul的宽度自适应特性</title><style>*{margin: 0;padding: 0}ul li{list-style: none;}.bg{overflow: hidden;z-index: -1;height: 100%;}.bg_img img{width: 100%;}</style><script src="js/jquery-1.10.1.min.js"></script>
</head>
<body>
<div class="bg"><ul><li class="bg_img"><img src="images/bg_1.jpg"></li></ul>
</div>
<script>$(function () {var height = window.screen.availHeight ;$(".bg_img img").css("height",height);})
</script>
注意:背景图片的z-index为负数。如图。
方法二:背景图片两侧模糊,颜色和整个区域的背景颜色一样
<style>
.inner{position:relative;width:"图片宽度";margin:auto;}
</style><div style="width:100%;backgroud-color:rgba();"><div class="inner"><img src=""></div></div>
把图片完整的放进div,把父级div的背景颜色设成和图片两侧颜色相同的。具体可参照百度开发者工具里的轮播。