07 CSS 背景

5/12/2021 html

CSS Backgrounds and Borders - CSS(层叠样式表) | MDN (opens new window)

# background-color

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

属性值

  • transparent :默认值(背景色透明)。
  • {color} :指定颜色。
div { background-color: #666666; }
div { background-color: red; }

# background-image

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

属性值

  • none :默认值(无背景图)。
  • url({url}) :使用绝对或相对 url 地址指定背景图像。
div { background-image: none; }
div { background-image: url('../images/pic.png') }

# background-repeat

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

属性值

  • repeat :默认值(背景图像在纵向和横向平铺)。
  • no-repeat :背景图像不平铺。
  • repeat-x :背景图像仅在横向平铺。
  • repeat-y :背景图像仅在纵向平铺。
div {background-image: url('../images/pic.png'); background-repeat: repeat-y;}

# 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;
}

# background-attachment

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

属性值

  • scroll :默认值。背景图像会随着页面其余部分的滚动而移动。
  • fixed : 当页面的其余部分滚动时,背景图像不会移动。
body {
    background-image: url('../images/pic.png');
    background-repeat: no-repeat;
    background-attachment: fixed;`
}

# background

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

语法

background: color image repeat attachment position
body { background: #fff url('../images/pic.png') no-repeat fixed center center }
更新时间: Wednesday, May 12, 2021 23:10