CSS背景样式

118 阅读2分钟

背景样式

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背景样式的使用方法,知识点有点多,但是很好理解。哪里有错误望指出。