CSS 背景
CSS背景属性用于定义元素的背景效果.
CSS背景属性:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
背景颜色
background-color属性指定元素的背景色.
页面的背景色设置如下:
使用CSS时,使用颜色最常见的方法是
- 一个有效的颜色名称,类似于"red".
- 像"#ff0000"一样的十六进制值
- rgb值"rgb(255,0,0)"
- rgba值"rgba(255,0,0,.5)"
有关颜色值的完整列表,请查看CSS颜色值
在下面的示例中<h1>、<p>和<div>元素具有不同的背景色:
背景图片
background-image属性指定要用作元素背景的图像.
默认情况下,图像是重复的,因此它覆盖了整个元素.
可以这样设置页面的背景图像:
下面是一个糟糕的文本和背景图像组合的例子.文字难以看清楚:
背景图像-水平或垂直重复
默认情况下,背景图像属性在水平和垂直两个方向重复图像.
有些图像只能水平或垂直地重复,否则它们看起来会很奇怪,如下所示:
如果上面的图像只是水平重复(background-repeat:repeat-x;),背景看起来会更好:
在上面的例子中背景图像显示在与文本相同的位置.我们想要改变图像的位置,这样它就不会对文本造成太大的干扰.
图像的位置是用background-position属性指定的:
背景图片 - 固定位置
要固定背景图像(不会与页面的其余部分一起滚动)请使用background-attachment属性:
全部的CSS背景属性
属性 | 描述 |
---|---|
评论区