CSS背景相关
CSS背景常用属性
background-color
- CSS中,颜色值通常以以下方式定义:
- 十六进制 - 如:
"#ff0000"
- 十六进制 - 如:
- RGB - 如:
"rgb(255,0,0)"
- RGB - 如:
- 颜色名称 - 如:
"red"
- 颜色名称 - 如:
1 | h1 {background-color:#6495ed;} |
background-image
- 默认情况下,背景图像进行
平铺重复
显示,以覆盖整个元素实体. - 水平或垂直平铺
1
2
3
4body
{
background-image:url('gradient2.png');
} - 如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:
1
2
3
4
5body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
background-repeat
- 属性设置
是否及如何重复背景
图像。
值 | 描述 |
---|---|
repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
repeat-x | 背景图像将在水平方向重复。 |
repeat-y | 背景图像将在垂直方向重复。 |
no-repeat | 背景图像将仅显示一次。 |
inherit | 规定应该从父元素继承 background-repeat 属性的设置。 |
- 例如:
1
2
3
4
5body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
/* 图片不平铺 */}
background-attachment
- 设置背景图像
是否固定
或者随着页面的其余部分滚动
。默认值是scroll.
值 | 描述 |
---|---|
scroll | 背景图片随着页面的滚动而滚动,这是默认 的。 |
fixed | 背景图片不会随着页面的滚动而滚动。 |
local | 背景图片会随着元素内容的滚动而滚动。 |
initial | 设置该属性的默认值。(其他属性有改变,而加入这个关键字 属性保持不变) |
inherit | 指定 background-attachment 的设置应该从父元素继承。 |
background-position
- 设置背景图像的起始位置。
值 | 描述 |
---|---|
left top | 如果仅指定一个关键字,其他值将会是”center” |
left center | 如果仅指定一个关键字,其他值将会是”center” |
left bottom | 如果仅指定一个关键字,其他值将会是”center” |
right top | 如果仅指定一个关键字,其他值将会是”center” |
right center | 如果仅指定一个关键字,其他值将会是”center” |
right bottom | 如果仅指定一个关键字,其他值将会是”center” |
center top | 如果仅指定一个关键字,其他值将会是”center” |
center center | 如果仅指定一个关键字,其他值将会是”center” |
center bottom | 如果仅指定一个关键字,其他值将会是”center” |
x% y% | 第一个值是水平位置,第二个值是垂直。左上角是0%0%。右下角是100%100%。如果仅指定了一个值,其他值将是50%。 。默认值为:0%0% |
xpos ypos | 第一个值是水平位置,第二个值是垂直。左上角是0。单位可以是像素(0px0px)或任何其他 CSS单位。如果仅指定了一个值,其他值将是50%。可以混合使用%和positions |
inherit | 指定background-position属性设置应该从父元素继承 |
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 CHUYUXUAN!
评论