前端知识点background 背景
background 是背景属性的缩写。
主要属性值
| 属性 | 默认值 | 说明 |
|---|---|---|
background-color | - | 颜色关键字、十六进制、rgb、rgba、transparent、currentColor |
background-image | - | url、none、initial、inherit |
background-position | 0% 0% | 背景位置，支持关键字、百分比与绝对值px |
background-repeat | no-repeat | repeat、repeat-x、repeat-y、no-repeat、initial、inherit |
background-origin | padding-box | padding-box、border-box、content-box |
background-size | auto | length、percentage、cover、contain |
background-clip | border-box | padding-box、border-box、content-box |
background-attachment | scroll | scroll、fixed、local、initial、inherit |
background-image 的一些关键字
1. image-set()
image-set() 可以根据用户设备的分辨率匹配合适的图像，兼容性适合在移动端使用
css
background-image: url("image@2x.png"); /* 当浏览器对 image-set 不支持时会使用；*/
background-image: image-set(
url(image@1x.png) 1x,
url(image@2x.png) 2x); /* 1x 表示1倍dpr*/background-image: url("image@2x.png"); /* 当浏览器对 image-set 不支持时会使用；*/
background-image: image-set(
url(image@1x.png) 1x,
url(image@2x.png) 2x); /* 1x 表示1倍dpr*/2. linear-gradient() 渐变
适合做一些图片上面有介绍文字的背景色，文字背景做一个黑色渐变的半透明效果
CSS
background-image: linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.6));background-image: linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.6));