css中background个人理解

这是一个层叠关系,最底层是background-color, 然后上面依次是图片,在style中出现后面的置于其上。
于是就有了同时设置color和image的做法,保证在image还没加载出来的时候,有color先垫着。

border一定是在background-color和background-image上的,不会被它们遮住

background-origin和background-clip的区别

首先,他们都可以取以下几个值 border-box, padding-box, content-box origin默认是 padding-box 而clip: border-box (可以理解为不切片)

background-origin设置的是图片绘制的位置,只能影响图片,对背景色不起作用
css中background个人理解_第1张图片
而clip可以同时作用于背景图片和背景色,(更像是对整个背景切片)
css中background个人理解_第2张图片
这两张图的不同仅在于右侧css中对origin和clip设置的不同

background-size

default: auto auto

本身大小,如果容器更大它也不变大。容器小,它就只显示一部分。
css中background个人理解_第3张图片
css中background个人理解_第4张图片
cover和contain都不会破坏图片本身的宽高比。
其实contain和cover就是size: 100%; 或者auto 100%; 的其中一种。具体看宽高情况
在这图的话:
contain = 100%
cover = auto 100%

css中background个人理解_第5张图片
设置多张图片,基本用不上,不讲也罢。

background-position

这个位置是相对于由 background-origin 定义的位置图层的。 也就是说图片的边界最多能靠到容器的什么位置。即origin中定义的那几种,padding-box,border-box,content-box。

我觉得计算最终效果可以这么想:
origin, size, repeat -> position -> clip
如果图片比容器小,从0,图片的左边贴着容器左边的border,到100%,贴着右边的border。y轴也是一样。
css中background个人理解_第6张图片
css中background个人理解_第7张图片
图片cover以后比容器大
也是一样的,
显示偏左侧,就是从0往上
css中background个人理解_第8张图片
如果想显示图片的右侧,那就是从100%往低了调
css中background个人理解_第9张图片
background-position还有一个作用就是用来搞雪碧图
这种一般都是通过position设置负值来达到效果。
关于position的学习参考了这篇文章
background-position 属性的作用:设置背景图像的起始位置。这里的起始位置是相对于自身容器而言
css中background个人理解_第10张图片
我试了一下,即使是容器比图片小,通过这个百分比的计算公式,算出负值也是正确的结果。知道有这么回事就好。
个人觉得他这种比官方说的相对位置更好理解
在这里插入图片描述
这也很好解释了图片和容器大小一样,设置百分比无效,因为相减得0

background-repeat

default: repeat

background-attachment

css中background个人理解_第11张图片
fixed可以用来做水印。
default: scroll

关于复合属性写法:
css中background个人理解_第12张图片

你可能感兴趣的:(html/css)