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

使用图层代码如下：

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

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