CssZenGarden读书笔记1(026)

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 ;
}

上面这个图像的作用是第一栏提供阴影效果。如果把图像直接应用在第一栏上，因为内容较短，

不会和第二栏对齐，故把阴影应用在body上。

 

 2 css图层: 内层的背景覆盖外层的背景

 

Html结构大概是这样的:

< div  id ="supportingText" >
   < div  id ="explanation" >
     < h3 > So What is This About? </ h3 >
   </ div >
</ div >

用到的三个图像:

so_what.jpg

so_what_bg.gif

 

 support_bg.gif

使用图层代码如下：

Code
#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 ? 注意两个图像上部的差距。后来我看了作者的代码，才知道我把事情搞复杂了。

Code
#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的边界即可。

 

转载于:https://www.cnblogs.com/ewee/archive/2009/10/21/1587564.html