css知识点整理（四）

背景图像效果

1.渐变效果：背景图片是一条的可以实现垂直平铺，水平平铺，或者不平铺

background: url("picture/01bg.png") no-repeat;//不平铺
background: url("") repeat-x;//水平平铺
background: url("") repeat-y;//垂直平铺

显示一张图片不用<img src="" alt="">，在css样式里面使用背景不平铺

#branding{
    width: 700px;
    height: 200px;
    background: url("") no-repeat left center;//并且指出图片出现的位置（定位在元素的左边且垂直居中，这里垂直居中还可以写：0 50%）
}

注意：不要将像素px和百分数%等单位与关键字混合使用，可能使css失效

2.圆角框

空————————

①固定宽度的圆角框

②山顶角（多个背景图像/border-radius（前缀-moz-border-radius/-webkit-border-radius）/border-image）

③投影

④不透明度

.alert{
    width: 300px;
    height: 100px;
    line-height: 30px;
    text-align: center;
    background: #000;
    color: white;
    border-radius: 2em;
    opacity: 0.8;
    filter:alpha(opacity=80);
}

<div class="alert">Here is Johnney</div>

css不透明度的主要问题是，除了对背景生效外，应用它的元素的内容也会继承它。

针对不透明度低，框的内容难以辨认，用RGBa

RGBa是一种同时设置颜色和不透明度的机制，RGB为红绿蓝，a代表alpha透明度

background-color: rgba(0,0,0,0.8);前三个代表颜色，0.8代表背景不透明度80%，即透明度为20%

a的值为1 表示100%不透明，值为0表示完全透明

⑤css视差效果

⑥图像替换（FIR/Phark/sIFR）

PNG透明度：滤镜

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader

空————————