Chapter 4 背景图像

4.2圆角框

4.2.1传统方法

1.上下两个圆角
2.上下两个圆角，中间长矩形repeat-y
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style type="text/css">
.box{
width:424px;
background:url(images/tile2.gif) repeat-y;
}
.box h2{
background: url(images/top2.gif) no-repeat left top;
}
.box .last{
background: url(images/bottom2.gif) no-repeat left bottom;
padding-bottom: 20px;
}
.box h2,.box p{
padding-left: 20px;
padding-right: 20px;
}
</style>
</head>
<body>
<div class="box">
<h2>Headline</h2>
<p>content

content
</p>
<p class="last"><a href="images/bottom2.gif" title="test">test</a></p>
</div>
</body>
</html>
</pre>
3.滑动门技术

四个背景图，top-left、top-right、bottom-left和bottom-right.
底部图像和框同高
html结构：
<code>
<div class="box">
<div class="box-outer">
<divc class="box-inner">
<h2>Headline</h2>
<p>Content</p>
</div>
</div>
</div>
</code>
图片应用的位置：
bottom-left——box
bottom-righ——box-out
top-left——box-inner
top-right——标题
CSS代码：
<code>
.box{
width:20em;
background:#effce7 url(images/bottom-left.gif) no-repeat left bottom;
}
.box-outer{
background: url(images/bottom-right.gif) no-repeat right bottom;
padding-bottom: 1em;
}
.box-inner{
background: url(images/top-left.gif) no-repeat left top;
}
.box h2{
background: url(images/top-right.gif) no-repeat right top;
padding-left: 1em;
padding-right: 1em;
}

</code>
4.山顶角技术

创建四个角的位图角蒙版
白色的蒙版将覆盖背景色，产生曲线效果
html框架与滑动门一样
CSS与滑动门一样，但是可以主框div上背景色

4.2.2 CSS3方法

1.同时添加多个图像

由于之前只能一次添加一个图像，所以需要多个<div>
可以只用一个<div>,同时添加四个图像
html结构：
<code>
<div class="box">
<h2>Headline</h2>
<p>Content</p>
</div>
</code>
CSS代码

2、border-radius
直接在CSS中用border-radius属性

4.3投影

1.来自基础的方法

创建与原图片一样大小的底图
图像放在div容器中
<div>设置<float>
img外边距margin负偏移
or 图片设置为相对定位

2.CSS3方法

直接对图片设置{box-shadow：apx bpx cpx #ddd}属性
a和b:偏移量
c:阴影宽度
d:颜色

ps直接设置box-shadow时也可以同时设置border-radius属性

4.4不透明度

1.CSS方法
.alret{backgroud-color:#000
border-radius:2em;
opacity:0.8;
filter:alpha(opacity=80);/proprietary IE code/}

2.RGBa方法
设置a
.alret{backgroud-color:rgba（0,0,0,0.8）;
border-radius:2em;}

3.PNG透明度
完全不懂..............

4.CSS视差效果
不太懂这个效果究竟是什么意思，代码如下：
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style type="text/css">

body{
    background-image: url();
    background-repeat: repeat-x;
    background-color: #d3ff99;
    background-position: 20% 0;
}
.midground{
    background-image: url();
    background-repeat: repeat-x;
    background-color: transparent;
    background-position: 40% 0;
}
.foreground{
    background-image: url();
    background-repeat: repeat-x;
    background-color: transparent;
    background-position: 150% 0;    
}

</style>

</head>
<body>
<div class="midground">
<div class="foreground">
<p>content</p>
</div>
</body>
</html>

</pre>