精通CSS-高级web标准解决方案（第2版）--读书笔记03--背景图像效果

第四章 背景图像效果

4.1 背景图像基础

body {
background: #ccc url(./picture.jpg) repeat-x left center;
}

背景图像应用：

• 作为背景应用于主体等元素
• url()为图片地址
• repeat（平铺）:-x(水平） -y（垂直） no-（不平铺）
• background-position（图片位置）：
  
  • 用关键字：left center（图像定位在元素的左边并垂直居中）bottom,top
  • 像素：px，使用图像的左上角的点定位元素的左上角垂直和水平像素距离
  • 百分数：n%，使用图像距离左上角n%的点定位到元素左上角垂直和水平n%的位置
  • 注意：最好不要混合使用px和%

4.2 圆角框

1、固定宽度的圆角框

思想：利用两个图像，一个放在框的顶部，一个放在底部，形成四个圆角。
方法：

• 单色没有边框的简单框：可以用两条图像加背景颜色，注意设置边距
• 复杂：内容框的显示可用一个重复显示的背景图像垂直平铺，加两条图像设置圆角。如果没有为框设置高度，则会随着文本尺寸而增加垂直扩展。同样注意设置边距。

灵活的圆角框
当需要框可以水平和垂直扩展时，则要利用四个图片，形成四个圆角。

.box {
    width:20em;
    background:#effce7 url("./img/bottom-left.gif") no-repeat left bottom;
}

.box-outer {
    background:url("./img/bottom-right.gif") no-repeat right bottom;
}

.box-inner {
    background:url("./img/top-left.gif") no-repeat left top;
}

.box h2 {
    background:url("./img/top-right.gif") no-repeat right top;
    padding-top:1em;
}

.box h2, .box p {
    padding-left:1em;
    padding-right:1em;
}
<div class="box">
    <div class="box-outer">
        <div class="box-inner">
            <h2>Headline</h2>
            <p>我是文本我是文本我是文本我是文本我是文本</p>
        </div>
    </div>
</div>

单位：

• em：是相对的数值单位，会受到外围文字的大小影响，1em是1倍文字大小。所以在浏览器中增加文本尺寸时，框会伸展。若用%也会伸缩。
• px：是绝对的数值单位，不会受到外围文字大小影响，1px代表1像素

优化：因为此方法添加了两个额外的无语义元素，如果要用到很多圆角框，可以使用JS（和DOM）添加额外元素。

2、山顶角

创建曲线型的位图角蒙版，白色的蒙版区域盖住你正使用的背景颜色，而角区域实际上是透明的。当放在有颜色的框上时，他们形成曲线形框的效果。
需要4个元素应用4个角蒙版：

<div class="box">
    <div class="box-outer">
        <div class="box-inner">
            <h2>Headline</h2>
            <p>我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本</p>
        </div>
    </div>
</div>

.box {
    width:20em;
    background:#effce7 url("./img/bottom-left.gif") no-repeat left bottom;
}

.box-outer {
    background:url("./img/bottom-right.gif") no-repeat right bottom;
    padding-bottom:5%;
}

.box-inner {
    background:url("./img/top-left.gif") no-repeat left top;
}

.box h2 {
    background:url("./img/top-right.gif") no-repeat right top;
    padding-top:5%;
}

.box h2, .box p {
    padding-left:5%;
    padding-right: 5%;
}

多个背景图像
省略了在代码中添加非语义性标记来制造多个元素中单一的背景图像

border-radius直接设置圆角框

//设置边角框的半径
.box{
    border-radius:1em;
    }

有时需要用-moz和-webkit前缀来扩展调用

.box {
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius:1em;
}

border-image指定一个图像作为元素的边框
利用九分法缩放，将图片划分为9个单独的部分，浏览器会自动的使用适当的部分作为边框的对应部分，可避免在调整圆角框大小时通常出现的失真。

//图片100像素高，在距离顶、底、左、右各25%的地方画四条线，切割图片为9个区域，边框宽度为25像素，如果图像不够大，会自动平铺，产生一个可扩展的框。
.box {
    -webkit-border-image: url("./img/corners.gif")
    25% 25% 25% 25% / 25px round round;
}

3、投影

简单的CSS投影
将一个大的投影图像应用于容器div的背景，用负的外边距偏移这个图像。

<div class="img-wrapper"><img src = "./img/dunstan.jpg" width = "300" 
                              height = "300" alt = "Dunstan" /></div>

.img-wrapper {
    background: url("./img/shadow.gif") no-repeat bottom right;
    clear:right;//div块级元素会水平伸展，要想div包围图像，要清除右侧阴影外的图像
    float:left;//浮动，产生收缩包围效果
}

.img-wrapper img {
    background-color: #fff;
    border:1px solid #a9a9a9;
    padding:4px;//以上是为图像加上类似照片边框效果
    margin:-5px 5px 5px -5px; //右下产生投影
}

box-shadow方便创建投影
浏览器本身创建投影，使用box-shadow，用到4个值：

• 垂直
• 水平偏移
• 投影的宽度（模糊程度）
• 颜色

img {
    box-shadow: 3px 3px 6px #666; //投影偏移3像素，宽度为6像素，颜色为中等灰色
}

4、不透明度

CSS不透明度
opacity:0.8; 80%的不透明度，但除了对背景生效，元素的内容也会继承，不透明度低，框的内容会难以辨认。

RGBa
同时设置颜色和不透明度。RGB代表：红绿蓝，a代表alpha透明度。
background-color:rgba(0,0,0,0.8)
1代表100%不透明，0代表完全透明。

PNG透明度
PNG文件支持alpha透明度

CSS视差效果
视差滚动：调整浏览器窗口大小时，背景图像以稍微不同的速度移动，让人觉得页面有深度。

<div class="midground">
    <div class="foreground">
        <p>Your content will go here!</p>
    </div>
</div>

在body元素上添加主背景，水平平铺，显示背景颜色。
把图像相对于窗口大小水平平移20%，百分比高，移动的更快

body {
    background-image: url("./img/bg-rear.gif");
    background-repeat: repeat-x;
    background-color: #d3ff99;
    background-position: 20% 0;//水平位置 垂直位置
}

让中景和前景移动速度不同（越靠前越快），产生深度效果。

.midground {
    background-image: url("./img/bg-mid.png");
    background-repeat: repeat-x;
    background-color: transparent;
    background-position: 40% 0;
}

.foreground {
    background-image: url("./img/bg-front.png");
    background-repeat: repeat-x;
    background-color: transparent;
    background-position: 150% 0;
}