【CSS】速查复习background相关所有属性(下)

Hsiao
253 阅读6分钟

前言

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情

background是一种 CSS 简写属性，用于一次性集中定义一个或多个背景属性，其中的属性有以下这些：

  • background-clip
  • background-color
  • background-image
  • background-origin

以上内容会在【CSS】速查复习background相关所有属性(上)涉及

  • background-size
  • background-attachment
  • background-blend-mode
  • background-position
  • background-repeat

内容不少，我会按照上面这个顺序来展开图文介绍

background-size

background-size设置背景图片大小或者拉伸形式

size：尺寸，数量的意思

取值：（初始值：auto auto）

  • <length>

    数值，指定背景图片大小，不能为负值

    如果仅有一个数值，这个数值将作为宽度值大小，高度值将被设定为auto；如果有两个数值，第一个将作为宽度，第二个作为高度

  • <percentage>

    百分比值，指定背景图片相对背景区的百分比。背景区由background-origin设置，如果background-attachment 为fixed，背景区为浏览器可视区（即视口），不包括滚动条。不能为负值。

    如果有一个或两个数值的结果与<length>一致

  • auto

    以背景图片的比例缩放背景图片

  • cover

    缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。cover 缩放背景并保持图像的宽高比例。这么做使得它所在容器被背景图片完全覆盖。当容器和背景图大小不同时，背景图的部分会被裁剪

    image-20221202185542873

  • contain

    缩放背景图片以完全装入背景区，可能背景区部分空白。contain 缩放背景并保持图像的宽高比例。该背景图会填充所在的容器。当背景图和容器的大小的不同时，容器的空白区域会显示由 background-color设置的背景颜色

    image-20221202185518796

background-attachment

background-attachment 属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。

attachment：附属物，连接物的意思

取值：（初始值：scroll）

  • scroll

    此属性表示背景相对于元素本身固定。而不是随着它的内容滚动

    scroll.gif

  • local

    此属性表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动

    local.gif

  • fixed

    此属性表示背景相对于视口固定（即浏览器） 。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动，固定在视口的左上角（初始值，可以通过background-position修改，详见后文）

    fixed.gif

    考虑到初次看见这个属性可能没法理解 “背景相对于视口固定” 是什么意思

    我们尝试一下其他的元素也用了fixed的情况

    fixed2.gif

    结果发现多个元素均设置背景图为background-attachment: fixed的情况下，仍会一起叠在浏览器视口的左上角（假设background-position为初始值），可以使用后面要讲的background-size调节图片大小，

    此时会在不同的元素经过该区域的时候显示他们相应的背景，是不是很酷！

多背景图支持

此属性支持多张背景图片。可以用逗号分隔来为每一张背景图片指定不同的属性值。每一张背景图片顺序对应相应的 attachment 属性。例如：

div {
  background-image: url("./1.png"), url("./2.png");
  background-attachment: fixed, scroll;
  background-repeat: no-repeat, repeat-y;
}

刚才提到了background-position为初始值时，background-attachment:fixed的背景图片会默认出现在浏览器左上角，那么这个属性是什么呢？

background-position

background-position属性为每一个背景图片设置初始位置。这个位置是相对于由 background-origin定义的图层的，或是浏览器视口图层。

position：位置的意思

取值：(初始值：0% 0%)

  • <position>：定义一组 x、y 坐标（相对于一个元素盒子模型的边界），它可以使用1-4个值进行定义

    • 使用1个值：第二个值默认是 center

      image-20221202182905000

    • 使用2个值：如果使用数字或者百分比，则第一个值表示水平位置x，第二个值表示垂直位置y

      image-20221202182835499

    • 使用3个值：有两个值是关键字值，另外一个是前面值的偏移量

      image-20221202182758620

      注意：

      x、y的关键字可以对换位置，但偏移值只能是偏移它的位置的前一个关键字

      image-20221202183048138

    • 使用4个值：第1、3个值定义x或y，第2、4个值分别是第1、3个值的偏移量

      image-20221202183451698

    • x、y坐标可以用关键字left、right、top、bottom、center以及长度或者百分比表示

    • 偏移量可以用长度或者百分比表示

如果觉得复杂，也可以直接使用background-position-x和background-position-y属性直接设定background-position的水平和竖直方向

background-blend-mode

background-blend-mode属性定义该元素的背景图片，以及背景色如何混合。

blend：混合，调和的意思

mode：模式的意思

取值：（初始值：normal）

  • <blend-mode>

    一个<blend-mode>定义混合的模式，可以有多个值，用逗号间隔。

<blend-mode>可以单独来讲：

它是一种 CSS数据类型，用于描述当元素重叠时，颜色应当如何呈现。每种混合模式采用前景和背景的颜色值，执行其计算并返回最终的颜色值

常见的有这些类型（以及他们的简单概要）：

  • normal：永远是顶层颜色
  • multiply：顶层颜色与底层颜色相乘的结果
  • screen：反转顶层颜色和底层颜色后相乘，再反转相加得到的结果
  • overlay：如果底层颜色比顶层颜色深，则是 multiply 的结果，如果底层颜色比顶层颜色浅，则是 screen 的结果
  • darken：每个颜色通道下，顶底两层颜色中的最暗值所组成的颜色
  • lighten：每个颜色通道下，顶底两层颜色中的最亮值所组成的颜色
  • ...

还有很多种类型，在此不赘述，对混合设计方面感兴趣的可以继续探索

background-blend-mode里面的属性应该按background-image 同样的顺序定义，每个背景对应一个<blend-mode>值

image-20221202175306071

送分题：猜得出是周杰伦的那三张专辑吗？

background-repeat

background-repeat属性定义背景图像的重复方式。

repeat：重复的意思

取值：（初始值：repeat）

  • repeat

    图像会按需重复来覆盖整个背景图片所在的区域。若边缘的图像不能刚好放进这个区域，则会被裁剪

    image-20221202201851258

  • space

    图像会尽可能得重复，但是不会裁剪（除非图像比元素大）。首尾图像会被固定在元素的边上，同时图像之间的空白会均匀分布。除非只有一个图像能被无裁剪地显示，background-position属性会被忽视。

    image-20221202202221952

  • round

    尽量得多展示图片。随着允许的空间在尺寸上的增长，被重复的图像将会伸展 (没有空隙)，直到有足够的空间来添加一个图像。当下一个图像被添加后，所有的当前的图像会被压缩来腾出空间。

    round.gif

  • no-repeat

    背景图像不会被重复，位置是由background-position属性来决定。

    image-20221202203828847

  • repeat-x

    只在水平方向上重复

  • repeat-y

    只在竖直方向上重复

  • <repeat-style> <repeat-style>

    第一个值是水平方向的重复方式，第二个值是竖直方向的重复方式

    image-20221202204540916

参考文献

MDN中文文档：developer.mozilla.org/zh-CN/

avatar
文章
阅读
粉丝