« 使用 css （sliding doors）制作好看的按钮
css 边框效果参数 »

css 背景的各种参数

1,593 Views 五月 27th, 2008 by peterzsk

利用 CSS ，你可以设置各种背景颜色或背景图片，下面的例子将告诉您如何设置这些参数：

1 . CSS 背景颜色参数：

css 代码：

  1. h4 { background-color: white; }
  2. p  { background-color: #1078E1; }
  3. ul { background-color: rgb( 149, 206, 145); }


网页内容：

  1. <h4>This is a < h4 > with a white background</h4>
  2. <p>This is a < p > with a background using the hexadecimal value of #1078E1</p>
  3. <ul>
  4. This is an unordered list
  5. with an RGB value of 149, 206, 145
  6. </ul>

显示效果：
123.jpg

2 . CSS 背景图片参数：

用下面这张图片作为背景图片：
smallpic.jpg源文件下载：smallpic.jpg

css 代码：

  1. p { background-image: url(smallPic.jpg); }
  2. h4{ background-image: url(http://zsk.akaka.com.cn/smallPic.jpg); }

网页内容：

  1. <p>This < p > has a background image using a local path to the picture.</p>
  2. <h4>This < h4 > has a background image using the complete url path.</h4>

显示效果：
124.jpg

3 . CSS 背景图片重复参数：

css 代码：

  1. p { 
  2. background-image: url(smallPic.jpg);
  3. background-repeat: repeat; }
  4. h4 { 
  5. background-image: url(smallPic.jpg);
  6. background-repeat: repeat-y;}
  7. ol { 
  8. background-image: url(smallPic.jpg);
  9. background-repeat: repeat-x;}
  10. ul { 
  11. background-image: url(smallPic.jpg);
  12. background-repeat: no-repeat;}

网页内容：

  1. <p>This < p > has a background image repeating in both directions (default repeat). If you use this option, make sure that your image was designed to be repeated.</p>
  2. <h4>This < h4 > has a background image repeating vertically (y). You could this to add a style to the side of your element.</h4>
  3. <ol>
  4. This is an ordered list
  5. With a background that repeats
  6. Horizontally (x)
  7. </ol>
  8. <ul>
  9. This is an unordered list
  10. With a background that repeats
  11. in neither direction.
  12. </ul>

显示效果：
125.jpg

4 . CSS 定位背景图像参数：

css 代码：

  1. p {
  2. background-image: url(smallPic.jpg);
  3. background-position: 20px 10px;
  4. }
  5. h4 {
  6. background-image: url(smallPic.jpg);
  7. background-position: 30% 30%;
  8. }
  9. ol {
  10. background-image: url(smallPic.jpg);
  11. background-position: top center;
  12. }

网页内容：

  1. <p>This < p > has a background image positioned with pixel values.</p>
  2. <h4>This < h4 > has a background image positioned with percentages.</h4>
  3. <ol>
  4. This is an ordered list
  5. With a background that was positioned
  6. using keywords.
  7. </ol>

显示效果：
126.jpg
可以通过改变 px 的数值来改变背景图片位置。

5 . CSS 渐变背景图片参数：

使用下面的图片作为渐变背景：
background.gif

css 代码：

  1. p {
  2. background-image: url(http://www.example.com/gradient.gif);
  3. background-repeat: repeat-x;
  4. }

网页内容：

  1. <p>This paragraph has a gradient background. The gradient background was first made in a painting program and then repeated horizontally across the paragraph element. It makes for a neat effect that also loads quickly! Because the image is very skinny, the file size is also very small. You could also create a gradient that changes color left to right and repeat it in the vertical direction to have a gradient on the side of your web page.</p>

显示效果：
127.jpg

作者：peterzsk
本文永久链接：http://zsk.akaka.com.cn/2008/05/css-background/
采用CC创作共用协议,转载需保留以上信息并<署名、非商业和保持一致>。

如果您喜欢我的文章，可以订阅我的 谢谢。

  • 看过本篇的朋友，还看过：

    • 2 Responses to “css 背景的各种参数”

    1. Gravatar Icon
      1一亿度

      顶，很全面！

      [回复]

      Comment on May 27th, 2008 at 3:18 pm  
    2. Gravatar Icon
      2网站推广

      让爱车充满蓝牙气息 fanslife车载套件 (1) - 搜易得IT数码商城

      [回复]

      Comment on Jul 4th, 2008 at 4:32 pm  

    Leave a Reply

    « 使用 css （sliding doors）制作好看的按钮
    css 边框效果参数 »