3.CSS 背景

2024-01-17 10:07 小编

3.1.background-color

background-color: 设置对象的背景颜色。

· 属性值

transparent:默认值(背景色透明)。

{color}:指定颜色。

· 示例

div { background-color: #666666; }div { background-color: red; }

3.2 background-image

background-image: 设置对象的背景图像。

· 属性值

none:默认值(无背景图)。

url({url}):使用绝对或相对 url 地址指定背景图像。

· 示例

div { background-image: none; }div { background-image: url('../images/pic.png') }

3.3 background-repeat

background-repeat: 设置对象的背景图像铺排方式。

· 属性值

repeat:默认值(背景图像在纵向和横向平铺)。

no-repeat:背景图像不平铺。

repeat-x :背景图像仅在横向平铺。

repeat-y:背景图像仅在纵向平铺。

· 示例

div {background-image: url('../images/pic.png'); background-repeat: repeat-y;}

3.4 background-position

background-position: 设置对象的背景图像位置。

· 属性值

{x-number | top | center | bottom } {y-number | left | center | right }:控制背景图片在元素的位置:x轴 、y轴。其铺排方式为no-repeat。

· 示例

div { background-image: url('../images/pic.png'); background-repeat: no-repeat; background-position: 50px 50px;}

3.5 background-attachment

background-attachment: 设置对象的背景图像滚动位置。

· 属性值

· scroll:默认值。背景图像会随着页面其余部分的滚动而移动。

· fixed: 当页面的其余部分滚动时,背景图像不会移动。

· 示例

body { background-image: url('../images/pic.png'); background-repeat: no-repeat; background-attachment: fixed;}

3.6 background

background 简写属性:在一个声明中设置所有的背景属性。

· 语法

background: color image repeat attachment position

· 示例

body { background: #fff url('../images/pic.png') no-repeat fixed center center }


在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码