css and image 总结

1：How do I add borders to images? 怎样给图片增加边框

img {

border: 1px solid #000000;
 }

2：How do I use CSS to remove the blue border around my navigation images? 去掉图片链接时的蓝色边框

img {

 border: none;
 }

3：How do I set a background image for my page using CSS?

body {
 font: 0.9em Verdana, Geneva, Arial, Helvetica, sans-serif;
 background-color: red;
 color: #000000;
 background-image: url(background-norepeat.jpg);
 background-repeat: no-repeat;

}

body {
 font: 0.9em Verdana, Geneva, Arial, Helvetica, sans-serif;
 background-color: #D2D7E4;
 color: #000000;
 background-image: url(background-repeatx.jpg);
 background-repeat: repeat-x;
    background-attachment: fixed;指定背景图像是固定的还是随其他页面内容滚动
}

如果图像不够高或者宽我们可以用相视的颜色设背景颜色

4：How do I position my background image?

#content {
 margin: 2em 4em 2em 4em;
 background-color: #FFFFFF;
 padding: 1em 1em 40px 1em;
  background-image: url(tick.gif);
  background-repeat: no-repeat;
  background-position: bottom right;
}

background-position: top;等于background-position: top center;

background-position: 30%;等于background-position: 30% 50%;

background-position: 20px 20px;

5：Can I set a background image on any element? 在任何元素上设置背景图片

#smallbox {

 background-image: url(boxbg.gif);

 background-repeat: repeat-x;}

6：How do I place text on top of an image?

#smallbox h2 {
 margin: 0;
 padding: 0.2em;
 background-image: url(boxheaderbg.jpg);
 background-repeat: no-repeat;
 color: #FFFFFF;
 background-color: red;
 font-size: 140%;
 font-weight: normal;
}

Can I create more complex image borders, such as a double border?

img.doubleborder {

 border: 1px solid #333;

 padding: 5px;

 background-color: #EEEEEE;
 }

这里也完全用背景图片

img.doubleborder {

 border: 5px solid #8E787B;

 padding: 20px;

 background-image: url(doubleborder-bg.gif);
 }