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>