DIV+CSS基础DIV+CSS补充知识:CSS背景属性知多少

DIV+CSS补充知识:CSS背景属性知多少

在CSS中可以为元素设置背景,背景可以是纯颜色,也可以是一副图片。传统的方法给html标签定义背景的时候使用类似bgcolor="#f8f8f8"这样的标签,而在CSS中应当使用background标签,关于该标签有下面的一些用法:

1. background-color 定义背景颜色:

例如要定义div标签的背景颜色为黑色,则可以定义为:

div {background-color:black;}

当给元素定义内边距padding后,内边距所包含的部分也会改变背景色。通常情况下,简写为background:black这样也是可以正确定义的。

2. background-image 定义背景图片:

例如要给p标签定义背景图片,可以定义为:

p {background-image:url(/style/bg.png);}

背景图片的地址写在url后的括号里,可以是绝对地址,也可以是相对地址。

3. background-repeat 定义背景图片平铺,它有下面这些情况:

background-repeat:repeat 默认情况下,背景图像将在垂直方向y和水平方向x重复,类似于给Windows桌面设置平铺背景的效果;

background-repeat:repeat-x 背景图将在水平方向重复;

background-repeat:repeat-y 背景图将在垂直方向重复;

background-repeat:no-repeat 背景图将仅显示一次,不进行任何方向的平铺;

background-repeat:inherit 规定应该从父元素继承background-repeat属性的设置。

4. background-position 设置背景图像的起始位置:

该功能又称背景定位,也就是可以选取图片中的一部分作为背景。

background-position的写法如background-position:5px 6px,表示离左边5px,离顶部6px,除了使用具体的数值,还可以使用top、left、right、center、bottom这些值来定义,例如例如,background-position:top right ,则表示使用图片的右上角,大家可以自己试试效果。

5. background-attachment 设置背景图片是否随着内容而滚动:

如果不想背景图片随着内容而滚动,或者说希望背景图片固定显示,则可使用background-attachment: fixed这个定义。

6. background-origin 规定background-position相对于什么位置来定位:

padding-box 背景图像相对于内边距框来定位;

border-box 背景图像相对于边框盒来定位;

content-box 背景图像相对于内容框来定位。

7. background-size 属性规定背景图像的尺寸:

background-size:400px 300px 用两个数值表示背景图片的高度和宽度,也可以用百分比来表示;

background-size:cover 这表示把背景图像扩展至足够大,以使背景图完全覆盖背景区域,图片的某些部分也许无法显示在背景定位区域中。

background-size:contain 这表示把图像图像扩展至最大尺寸,以使其宽度或高度适应内容区域。

8. background-clip 属性规定背景的绘制区域:

background-clip:border-box 这表示背景被裁剪到边框盒;

background-clip:padding-box 这表示背景被裁剪到内边距框;

background-clip:content-box 这表示背景被裁剪到内容框。

虽然背景属性有这么多定义方式,但我们常用的是通过简写的方法来表示,例如:

div {background:#333 url(image.gif) no-repeat fixed left top;}

使用background简写属性,然后定义背影颜色,背景图片,是否重复,是否滚动,以及它的位置等等,使用简写的背景属性能大大提高效率。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/div_css/14.html