CssZenGarden-026
地址 http://www.csszengarden.com/?cssfile=026/026.css
1. 在body上应用背景图像。
body
{
font : 12px/16px arial, helvetica, verdana, sans-serif ;
color : #555 ;
background : url(bg_left.gif) repeat-y #fff ;
margin : 0 ;
padding : 0 ;
}
font : 12px/16px arial, helvetica, verdana, sans-serif ;
color : #555 ;
background : url(bg_left.gif) repeat-y #fff ;
margin : 0 ;
padding : 0 ;
}
上面这个图像的作用是第一栏提供阴影效果。如果把图像直接应用在第一栏上,因为内容较短,
不会和第二栏对齐,故把阴影应用在body上。
2 css图层: 内层的背景覆盖外层的背景
Html结构大概是这样的:
<
div
id
="supportingText"
>
< div id ="explanation" >
< h3 > So What is This About? </ h3 >
</ div >
</ div >
< div id ="explanation" >
< h3 > So What is This About? </ h3 >
</ div >
</ div >
用到的三个图像:
so_what.jpg
so_what_bg.gif
support_bg.gif
使用图层代码如下:
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
#supportingText {
background: url(images/support_bg.gif) repeat-y top right;
}
#supportingText p {
padding-right: 2em;
}
#explanation h3 {
background: url(images/so_what_bg.gif) no-repeat top right;
margin: 0;
padding: 0;
text-indent: -1000px;
height: 36px;
}
#explanation {
background: url(images/so_what.jpg) no-repeat top left;
}
在这里,用so_what_bg.gif遮住了so_what.jpg的一部分,使它看起来也有阴影。为什么不重复使用 support_bg.gif ? 注意两个图像上部的差距。后来我看了作者的代码,才知道我把事情搞复杂了。
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
#explanation {
background: url(so_what_bg.gif) no-repeat top right transparent;
}
#explanation h3 {
margin: 0 15px 20px 0;
padding: 0;
height: 36px;
background: url(so_what.jpg) no-repeat transparent;
}
#explanation h3 span {
display: none;
}
注意 :
#explanation h3 { margin: 0 15px 20px 0; }
留出一个15px的边界即可。