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设置的是图片绘制的位置,只能影响图片,对背景色不起作用
在这里插入图片描述
而clip可以同时作用于背景图片和背景色,(更像是对整个背景切片)
在这里插入图片描述
这两张图的不同仅在于右侧css中对origin和clip设置的不同

background-size

default: auto auto

本身大小,如果容器更大它也不变大。容器小,它就只显示一部分。
在这里插入图片描述
在这里插入图片描述
cover和contain都不会破坏图片本身的宽高比。
其实contain和cover就是size: 100%; 或者auto 100%; 的其中一种。具体看宽高情况
在这图的话:
contain = 100%
cover = auto 100%

在这里插入图片描述
设置多张图片,基本用不上,不讲也罢。

background-position

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

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

background-repeat

default: repeat

background-attachment

在这里插入图片描述
fixed可以用来做水印。
default: scroll

关于复合属性写法:
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值