CSS 背景

 

css height 100% CSS成功设置DIV高度百分之百

 

 

box-sizing: border-box;

内容宽度（高度）= 设定宽度（高度） -  边框宽度（高度） -   内边距宽度（高度）

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
*{zoom:1}

 

 

background-size    设定背景图大小

=>      IE 9+

html,body{height:100%; }
body{ margin:0; }
#box{
    background: url("images/img.jpg") no-repeat center center;
    /*background-size: 宽度 高度;*/
    background-size: contain; /* 相当于 background-size: 100% auto ;  */
    background-size: cover; /* 相当于 background-size: auto 100% ; */

    width: 100%;
    height: 100%;
}

 

background-origin 设置背景图片起始位置

=>      IE 9+

.box{
    background: url("images/1.jpg") no-repeat center center;
    background-size: 100%;
    border: 5px dashed red;
    padding: 10px;
    width: 100px;
    height:100px;
    margin: 10px auto;
}
.box1{
    background-origin: border-box;
}
.box2{
    background-origin:padding-box;
}
.box3{
    background-origin: content-box;
}

效果图：

 

 

 

background-clip  设置容器背景的显示范围

=>      IE 9+

.box {
    background: url("images/homebg1.jpg") no-repeat center center;
    background-size: cover;
    border: 5px dashed red;
    padding: 10px;
    width: 100px;
    height: 100px;
    margin: 10px;
}

.box1 {
    background-clip: border-box;
}

.box2 {
    background-clip: padding-box;
}

.box3 {
    background-clip: content-box;
}

效果图：

 

颜色模式

 

=>      IE 9+

 

RGBA 模式

 

background: rgba(255, 255, 255, 0.5);

<style type="text/css">
    html, body {
        height: 100%;
    }

    body {
        margin: 100px 0 0;
    }

    .box {
        background: url("images/homebg1.jpg") no-repeat center center;
        background-size: cover;
        width: 300px;
        height: 300px;
        padding: 10px;
        margin: 0 auto;
    }

    .overlayer {
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.5);
    }

</style>

<div class="box">
    <div class="overlayer"></div>
</div>

效果图：

透明度

<style type="text/css">
    .opacity {
        filter: Alpha(Opacity=20);
        opacity:0.2;
    }

</style>

<img src="images/homebg1.jpg"/>
<img src="images/homebg1.jpg" class="opacity"/>

效果图：