css实现div半透明效果
作者:陆金龙
发表时间:2017-09-23 17:04
div 半透明背景效果:
background:rgba(255,255,255,0.5)
div背景颜色渐变(从左到右90deg 开始颜色#00b9fe 结束颜色transparent):
background-image: linear-gradient(90deg, #00b9fe, transparent), linear-gradient(90deg, #00b9fe, transparent);
div背景图铺满div大小:
background-size: cover;//100%
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
页面背景图片适应窗体大小:
css代码:
body {
min-width: 100% !important; //不设置最小值限制
min-height: 100% !important;
}
.bg-img {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
html代码:
<body>
<div class="bg-img">
<img id="img_bg" src="./images/bg.jpg" height="100%" width="100%"/>
</div>
<div>page content</div>
</body>