猪窝

2007-08-14

CSS学习之背景图像的基础

Filed under: CSS学习 — admin @ 11:06 pm

背景图像基础

CSS中应用背景图像的方式:


body {
background: url(pattern.gif)
}

如何让背景为渐变效果?

页面垂直渐变,需要一个很高但是很窄的渐变图像

body {
background: #ccc url(gradient.gif) repeat-x;
}
防止页面过长,设置背景颜色

纯装饰性图片,可以从内容分离,在HTML中为这个图像创建一个“钩子”,然后使用CSS应用这个图像。


#branding {
height: 200px;
width: 700px;
background: url(brand.gif) no-repeat;
}

在站点每一个标题添加一个符号

h1 {
 padding-left: 30px;
background: url(bullet.gif) no-repeat left center;
}
最后两个关键字定义了图像的位置
还可以使用像素或者百分比来定义图像的位置

标题图标

如果使用像素设置背景位置,那么图像左上角到元素左上角的距离为指定的像素数。所以指定垂直和水平位置都是20像素,那么图像左上角出现在元素左上角下面,左边20像素的位置,如果使用百分比不太一样。是使用图像上的一个对应点。是指图像上距离左上角20%的点定位到父元素上距离左上角20%的位置

 背景图片定位说明

不要将像素或百分比等单位与关键字混合使用

作者: 猪猪
原载: 猪窝CSS学习
版权声明:转载时必须以链接形式注明作者和原始出处及本声明。

4 Comments »

  1. 好象文章下半部分来自 andy budd的吧

    Comment by pheakin — 2007-09-06 @ 4:55 pm

  2. 还记得我么??

    百度知道里给你解决PS CS3的“小朋友”

    …………其实,

    你只比我大一岁多。

    Comment by 無意メ沉淪↓ — 2007-10-23 @ 1:11 pm

  3. 哈哈,收到,大一岁也是大,现在阅历会大很多!!嘿嘿!

    Comment by admin — 2007-10-23 @ 10:37 pm

  4. 再回来看哈,

    你主要做哪个方向的啊,程序还是设计?

    Comment by 無意メ沉淪↓ — 2007-11-04 @ 12:02 am

RSS feed for comments on this post. TrackBack URL

Leave a comment

Powered by WordPress