CSS 背景属性(background)-KeepStudy

CSS 背景属性(background)

| 属性 | 描述 | CSS |
|-----|-----|-----|
| background | 复合属性。设置对象的背景特性。 | 1 |
| background-attachment | 设置或检索背景图像是随对象内容滚动还是固定的。必须先指定background-image属性。 | 1 |
| background-color | 设置或检索对象的背景颜色。 | 1 |
| background-image | 设置或检索对象的背景图像。 | 1 |
| background-position | 设置或检索对象的背景图像位置。必须先指定background-image属性。 | 1 |
| background-repeat | 设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性。| 1 |
| background-clip | 指定对象的背景图像向外裁剪的区域。 | 3 |
| background-origin | S设置或检索对象的背景图像计算background-position时的参考原点(位置)。| 3 |
| background-size | 检索或设置对象的背景图像的尺寸大小。 | 3 |

##  background 属性
- 语法：background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
- 例子
```css
body{ 
    background: #00ff00 url('smiley.gif') no-repeat fixed center; 
}
```

## background-attachment 属性
- 语法： background-attachment：value
- 属性值
    - scroll：背景图片随着页面的滚动而滚动，这是默认的。
    - fixed：背景图片不会随着页面的滚动而滚动。
    - local：背景图片会随着元素内容的滚动而滚动。
    - initial：设置该属性的默认值。
    - inherit：从父元素继承。

## background-color 属性
- 语法：background-color：value
- 属性值
    - color：指定背景颜色。在CSS颜色值近可能的寻找一个颜色值的完整列表。
    - transparent：指定背景颜色应该是透明的。这是默认
    - inherit：指定背景颜色，应该从父元素继承
- 实例
```css
body{ background-color:yellow;}
h1{background-color:#00ff00;}
p{background-color:rgb(255,0,255);}
```

## background-image 属性
- 属性值
    - url('URL')：图像的URL
    - none：无图像背景会显示。这是默认
    - linear-gradient()：创建一个线性渐变的 "图像"(从上到下)
    - radial-gradient()：用径向渐变创建 "图像"。
    - repeating-linear-gradient()：创建重复的线性渐变 "图像"。
    - repeating-radial-gradient()：创建重复的径向渐变 "图像"
    - inherit：指定背景图像应该从父元素继承

## background-position 属性
- 属性值
    - left top、left center、left bottom、right top、right center、right bottom、center top、center center、center bottom：如果仅指定一个关键字，其他值将会是"center"
    - **x% y%：**第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％
    - **xpos ypos：**第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions
    - **inherit：**从父元素继承

## background-repeat 属性
- 属性值
    - repeat：背景图像将向垂直和水平方向重复。这是默认
    - repeat-x：只有水平位置会重复背景图像
    - repeat-y：只有垂直位置会重复背景图像
    - no-repeat：background-image 不会重复
    - inherit：从父元素继承

## background-clip 属性
- 属性值
    - border-box：默认值。背景绘制在边框方框内（剪切成边框方框）。
    - padding-box：背景绘制在衬距方框内（剪切成衬距方框）。
    - content-box：背景绘制在内容方框内（剪切成内容方框）。

## background-origin 属性
- 属性值
    - border-box：默认值。背景绘制在边框方框内（剪切成边框方框）。
    - padding-box：背景绘制在衬距方框内（剪切成衬距方框）。
    - content-box：背景绘制在内容方框内（剪切成内容方框）。

## background-size 属性
- 属性值
    - length：设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
    - percentage：将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度，各个值之间以空格 隔开指定高和宽，以逗号 , 隔开指定多重背景。如果只给出一个值，第二个是设置为"auto(自动)"
    - cover：此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
    - contain：此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
- 实例
```css
/* 关键字 */
background-size: cover
background-size: contain
/* 一个值：这个值指定图片的宽度，图片的高度隐式的为 auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto
/* 两个值 */
/* 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto
/* 逗号分隔的多个值：设置多重背景 */
background-size: auto, auto     /* 不同于 background-size: auto auto */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain
/* 全局属性 */
background-size: inherit;
background-size: initial;
background-size: unset;
```

顶部

CSS属性

目录

相关推荐