背景颜色与图像

设置背景颜色

background-color属性可以作用在所有元素上,用于设定网页背景色。同color属性一样,background-color属性接受任何有效的颜色值,而对于没有设定背景色的标记,默认背景色为透明(transparent)。

其语法格式:

{background-color:transparent|color;}

设置背景图像

不仅可以给网页设置简单的颜色背景,而且可以使用background-image给网页设置丰富多彩的背景图片。通过CSS3属性可以对背景图片进行精确定位。

background-image语法格式如下:

background-image:none|url(url);

其默认属性是无背景图,当需要使用背景图时可以用url进行导入,url可以使用绝对路径,也可以使用相对路径。

如果标签施加了背景颜色和背景图片两个属性。这时只有背景图片生效。

设置背景图像平铺

如果我们的文字比较短,只需要不大的一个图片尺寸就可以让整个文字加上背景了。设想如果一段超长的文字,是不是就意味着需要给它做一个超大尺寸的背景图片呢?我们可以使用background-repeat属性对图形进行平铺,自动适应页面的大小。

属性值 说明
repeat 背景图像将向垂直和水平方向重复。这是默认
repeat-x 只有水平位置会重复背景图像
repeat-y 只有垂直位置会重复背景图像
no-repeat background-image不会重复
inherit 指定background-repea属性设置应该从父元素继承

设置背景图像位置

属性值 说明
center 背景图像横向和纵向居中
left 背景图像在横向上填充从左边开始
right 背景图像在横向上填充从右边开始
top 背景图像在横向上填充从顶部开始
bottom 背景图像在横向上填充从底部开始

设置背景图片位置固定

在浏览器中随着滚动条的移动,背景图片有时候也会跟着一起移动。可以使用background-attachment属性,把背景图像设置成不随滚动的固定不变的效果。属性值列表如下:

属性值 说明
fixed 背景图像相对于窗体固定
scroll 背景图像相对于元素固定,也就是说当元素内容滚动时背景图像不会跟着滚动,

因为背景图像总是要跟着元素本身,但会随元素的祖先元素或窗体一起滚动

local 背景图像相对于元素内容固定,也就是说当元素内容滚动时背景图像也会跟着滚动,因为背景图像总是要跟着内容

发表评论

电子邮件地址不会被公开。 必填项已用*标注