精通CSS读书笔记（第四章 背景图像效果）

第四章 背景图像效果

本章内容：
固定宽度和可变宽度圆角框
滑动门技术
多个背景图像和border-radius的属性
CSS投影
不透明度和RGBa
让PNG适用于IE老版本
视差滚动
图像替换

4.1 图像背景基础

body{
	background-image: url(xxx.jpg);
}

默认平铺，可以选择垂直平铺、水平平铺和不平铺。

body {
    background-image: url(xxx.jpg);
    /*background-repeat: repeat-x;/*水平平铺*/
    background-repeat: no-repeat;
    background-color: #ccc;
}

但是我们一般将图像从标签元素中分离出来（为图像创建钩子），定义类的样式class或id，然后使用一个<div>，并应用这个类的样式，如下：

#branding{
    background-image: url(xxx.jpg);
    /*background-repeat: repeat-x;/*水平平铺*/
    background-repeat: no-repeat;
    background-color: #ccc;
}

还可以设置图像的位置，如下所示。最后两个关键字指出图像位置。在这个示例中，定位于左边且垂直居中。（项目符号+图片）

h1{
	padding-left:30px;
    background-image: url(xxx.jpg);
    /*background-repeat: repeat-x;/*水平平铺*/
    background-repeat: no-repeat;
    background-position: left center;
}

也可以使用像素定位。相对于图像左上角进行定位。
但是使用百分比和使用像素有太一样。它不相对于图像左上角进行定位，而是使用图像上的一个对应点。
如果指定垂直20%，水平20%，实际是在将图像上距离左上角20%的点，定位到父元素上距离左上角20%的地方。

将垂直设置为50%，可以使项目符号图像垂直居中。

h1 {
	padding-left:30px;
    background-image: url(xxx.jpg);
    background-repeat: no-repeat;
    background-position: 0 50%;
}

不要把关键字、百分比、像素混用。这可能会导致CSS失效。

background的CSS简写版：

h1 {
	background: #ccc url(xxx.jpg) no-repeat left center
}

4.2 圆角框

4.2.1 固定宽度的圆角框

<div class="box">
	<h2>head</h2>
	<p>some text</p>
</div>

对于box的CSS样式，我们设置背景图为圆角框即可实现圆角框效果。

灵活的圆角框

随着框的尺寸增加，大图像有更多的图像显示出来，这样就实现了框扩展的效果。这个有时被称为滑动门技术。

4.2.2 山顶角

1、多个背景图像

2、border-radius

.box{
	border-radius: 1em;
}

3、border-image

4.3 投影

4.3.1 简单的CSS投影

使用图片，使用margin偏移图像。

4.3.2 来自Clagnut的方法

使用相对定位来偏移图像。

box-shadow

img {
	box-shadow: 3px 3px 6px #666
	/*垂直偏移、水平偏移、投影宽度、颜色*/
}

4.4 不透明度

1、CSS不透明度
通过opacity设置

2、GRBa
rgb+alpha可以同时设置颜色和透明度。

3、PNG透明度

4、CSS视差效果

4.5 图像替换

4.5.1 FIR

4.5.2 Phark

4.5.3 sIFR

4.6 小结