div半透明背景效果 div背景颜色渐变 背景图占满div 背景适应窗体大小

创建时间:2017/9/23 17:04:28
关键字:css,div,半透明,颜色渐变

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>