背景
阅读
2022-09-17更新
最新编辑:逗比的马老师
阅读:
更新日期:2022-09-17
最新编辑:逗比的马老师
属性 | 描述 |
---|---|
background | 简写属性,作用是将背景属性设置在一个声明中。 |
background-color | 设置元素的背景颜色。 |
background-image | 把图像设置为背景。 |
background-repeat | 设置背景图像是否及如何重复。 |
background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
background-position | 设置背景图像的起始位置。 |
background-color
背景颜色
background-color 属性定义了元素的背景颜色.
页面的背景颜色使用在body的选择器中:
background-image
背景图像
background-image 属性描述了元素的背景图像.
默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体.
页面背景图片设置实例:
background-repeat
背景图像 - 水平或垂直平铺
配合background-image 属性使用
图像只在水平方向平铺 (repeat-x) 设置实例:
body
{
background-image:url(https://wiki.biligame.com/css/Special:Redirect/file/Background.jpg);
background-repeat:repeat-x;
}
background-position
背景图像- 设置定位与不平铺
配合background-image 属性使用
利用 background-position 属性改变图像在背景中的位置:
body
{
background-image:url(//wiki.biligame.com/css/Special:Redirect/file/Background.jpg);
background-repeat:no-repeat;
background-position:right top;
}
background
背景 - 简写属性
在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。
为了简化这些属性的代码,我们可以将这些属性合并在同一个属性中.
背景颜色的简写属性为 "background":
body {
background: url(//wiki.biligame.com/css/Special:Redirect/file/Background.jpg) no-repeat fixed 50% 0;
}
|