背景样式
background-color 背景颜色
background-image 背景图片
- 设置背景图片
background-image: url("../../media/examples/star.png"), url("../../media/examples/lizard.png"); - 设置背景渐变色
linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5))
background-size 设置背景图片大小
-
数值 以背景图片的比例缩放背景图片
-
cover缩放背景图片以完全覆盖背景区,该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时,背景图的左/右或者上/下 部分会被裁剪。 -
contain缩放背景图片以完全装入背景区,该背景图会填充所在的容器。当背景图和容器的大小的不同时,容器的空白区域(上/下或者左/右)会显示由background-color设置的背景颜色。 -
background-repeat设置背景图片的重复方式 -
round可以缩放 -
space均匀分布 -
repeat按照需求来覆盖背景图片所在区域 -
repeat-x在X轴上覆盖 -
repeat-y在Y轴上覆盖
background-position 设置背景图片的初始位置
可以是四个值 (left,right) 数值 (top, bottom) 数值
例如:
left 50% top 50%
left左边界right右边界top上边界bottom下边界
background-attachment 决定背景图像的位置是在视口内固定,或者随着包含它的区块滚动。
-
fixed此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动。 -
local此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制,背景将会随着元素的内容滚动,并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。 -
scroll此关键属性值表示背景相对于元素本身固定,而不是随着它的内容滚动(对元素边框是有效的)。
这是我总结的关于CSS背景样式的使用方法,知识点有点多,但是很好理解。哪里有错误望指出。