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


theme: condensed-night-purple

前言

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

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

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

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

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

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

background-clip

background-clip 设置元素的背景(背景图片或颜色)是否延伸到边框内边距盒子内容盒子下面

clip:有裁剪截取片段的意思

如果没有设置背景图片background-image背景颜色background-color

这个属性只有在边框 border被设置为soild透明半透明时才能看到视觉效果(与 border-styleborder-image有关)

否则,本属性产生的样式变化会被边框覆盖

取值: (初始值为:border-box)

  • border-box

    背景延伸至外边距margin外沿,延伸至边框外沿。image-20221129095546104

  • padding-box

    背景延伸至内边距padding外沿,不会绘制到边框处。image-20221129095517803

  • content-box

    背景被裁剪至内容区content box外沿。image-20221129100124848

  • text

    背景被裁剪成文字的前景色,color要调成tranparent

    (这也是一种实现渐变色文字的思路)image-20221129100136150

background-color

background-color 设置元素的背景色,属性的值为颜色值透明transparent,二者选其一

color颜色的意思

取值:(初始值为transparent )

  • <color>

    一个描述背景统一颜色的CSS color值。即使一个或几个的 background-image被定义,如果图像是不透明的,通过透明度该颜色也能影响到渲染

    当然,transparent 也是一种颜色,即rgba(0,0,0,0)

那么背景色的概念了解后,就要引出背景图的概念,以及他们同时出现时的权重关系

background-image

background-image属性用于为一个元素设置一个或者多个背景图像

image映像图像的意思

多个背景图像的层级情况:先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像图层位置最高。

边框的层级情况:元素的边框 border会在指定的图像上面绘制

背景色的层级情况:元素的背景色background-color 会在在指定的图像下面绘制

拿MDN网站里面的图举个例子:

  • 这个元素的background-image有三个属性值
  • 第一个属性代表过渡色,第二个属性lizard.png蜥蜴所在的层级,第三个属性star.png星星所在的层级

image-20221129103019368

最后呈现的效果是:过渡色在最底部,先出现的lizard.pngstar.png的上层

image-20221129104333465

背景色 #000 被设置在最底层

image-20221129104154164

如图所示:

image-20221129104250645

取值:(初始值为:none)

  • none

    是一个表示无背景图的关键字

  • image

    用来标记将要显示的图片,支持多背景设置,背景之间以逗号隔开

    linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片!!!

备注: 即使图像是不透明的,背景色在通常情况下并不会被显示,web 开发者仍然应该指定 background-color属性。因为当图像无法被加载(如网络连接断开的情况)浏览器会将此情况等同于其值被设为 none,背景色就会被展现。

图像的绘制与盒子和边框的关系,需要在 CSS 属性background-clipbackground-origin 中定义,那我们顺带讲下一个部分。

background-origin

background-origin规定了指定背景图片background-image原点位置背景相对区域

origin:起源,出身,(数)原点的意思

取值

  • border-box

    背景图片的摆放以 border 区域为参考

  • padding-box

    背景图片的摆放以 padding 区域为参考

  • content-box

    背景图片的摆放以 content 区域为参考

是不是似曾相识,这不就是background-clip吗?

单看这描述两者确实很相像,但是这两个元素如今还能同时写在这个文章里是有原因的

刚才的例子,这次我们加上背景色摆放尺寸的设定(下回会讲到)以便观察

image-20221129111846754

image-20221129111907711

我们把background-clip改成background-origin

image-20221129111932651

image-20221129111945496

结果发现

  • background-clip是一种clip裁剪,把背景色和背景图一起裁剪padding-box里面

  • background-origin是设定背景图origin原点,只把背景图放在padding-box里面

  • padding-boxcontent-box的表现情况和background-clip也同样只有这个小区别,而且他没有text属性。

注意:当使用 background-attachment为 fixed 时,该属性将被忽略,不起作用

那么background-attachment是什么属性,在第二篇文章会讲到。

参考文献

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

© 版权声明
THE END
喜欢就支持一下吧
点赞5 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容