设置背景的显示区域 background-clip
默认值border-box 边框盒的左上角开始
padding-box 填充盒的左上角开始
content-box 内容盒的左上角开始
background-clip: border-box ;
background-clip: padding-box
background-clip: content-box
设置背景的渲染区域(定位区域) background-origin
默认值border-box 边框盒的左上角开始
padding-box 填充盒的左上角开始
content-box 内容盒的左上角开始
background-origin: border-box ;
background-origin: padding-box;
background-origin: content-box;
opacity:
opacity属性指定了一个元素的不透明度。
取值0~1
背景颜色:background-color
背景图像:background-image
取值:
- url(“图片的位置”)
- 如需要多张图片则需要在url后面加逗号再加url(“图片的位置”)
背景图像-水平或垂直平铺: background-repeat
取值:
- 默认值:repeat
- 不平铺:no-repeat
- 水平平铺:repeat-x
- 垂直平铺:repeat
背景定位:background-position
取值
- 第一个值是x轴的位置或者偏移量
- 第二个值是y轴的位置或者偏移量
关键字:left、right、top、bottom、center
偏移量取值: 10px -10px
背景渲染:background-origin
取值
- border-box(默认值) 边框盒的左上角开始
- padding-box 填充盒的左上角开始
- content-box 内容盒的左上角开始
背景剪切:background-clip
取值
-
border-box(默认值) 边框盒的左上角开始
-
padding-box 填充盒的左上角开始
-
content-box 内容盒的左上角开始
背景固定或滚动:background-attachment
取值
-
不滚动:fixed
-
滚动:scorll
设置背景图片的大小:background-size
如果不设置background-size则背景图片的大小为图片本身的大小
取值
- 如果取一个值则为为宽度的值
- 取两个值则第一个为宽度为宽,第二个为高
渐变色
渐变色(线性渐变、径向渐变)
linear-gradient(线性渐变)
radial-gradient(径向渐变)
第一个参数是方向
第二个是颜色
线性渐变且平铺
background-image: repeating-linear-gradient(to right(渐变方向), red 0px 20px(颜色起始位置和结束位置),green 20px 40px);
径向渐变且平铺:
background:repeating-radial-gradient(skyblue 5%,red 35%,rgb(231, 228, 56) 10%);