CSS 的 background 属性

 

正如我之前所说,文档树中的每个元素都是一个方盒。每个盒都有背景层,它可以是完全透明的、有颜色的或一张图片。背景层由 8 个 CSS 属性(和 1 个简写属性)控制。

background-color

background-color 属性设置元素背景颜色。它的值可以是一个合法的颜色值或 transparent 关键字。

背景颜色绘制在由 background-clip 属性指定的盒模型区域内。如果同时设置了背景图片,颜色层会在它们后面。不像图片层可以设置多个,每个元素只拥有一个颜色层。

background-image

background-image 属性为元素定义一个(或多个)背景图片。它的值通常是用  url()  符号定义的图片  url。none 也是允许的,它会被当做空的一层。

我们也可以指定多个背景图片,用逗号隔开。沿着 z 轴从前向后依次绘制每个图片。

background-repeat

background-size 指定大小和 background-position 指定位置后,background-repeat 属性控制如何平铺背景图片。

属性值可以是以下关键字之一:repeat-xrepeat-yrepeatspaceroundno-repeat。除了前两个(repeat-x 和 repeat-y)之外,其他关键字可以写一次来同时定义 x 轴和 y 轴,或分开定义两个维度。

background-size

background-size 属性定义背景图片的大小。它的值可以是一个关键字、一个长度或一个百分比。

属性可用的关键字是 containcovercontain 会按图片比例将其放大至宽和高完全适应区域,与之相反,cover 会将图像调整至能够完全覆盖该区域的最小尺寸。

对于长度值和百分比,我们可以用来定义背景图片的宽高。百分比值根据元素的尺寸来计算。

background-attachment

background-attachment 属性控制背景图片在可视区和元素中如何滚动。它有三个可能的值。

fixed 意思是背景图片相对于可视区固定,即使用户滚动可视区时也不移动。local 意思是背景在元素中位置固定。如果元素有滚动机制,背景图片会相对于顶端定位,当用户滚动元素时,背景图片会离开视野。最后,scroll 意思是背景图片固定,不会随着元素内容滚动。

background-position

这个属性,结合 background-origin 属性,定义了背景图片起始位置。它的值可以是一个关键字、一个长度或一个百分比,我们可以依次定义 x 轴和 y 轴的位置。

可用的关键字有toprightbottomleftcenter。我们可以任意组合使用,如果只指定了一个关键字,另一个默认是 center

对于长度值和百分比值,我们也可以依次定义 x 轴和 y 轴的位置。百分比值与容器元素相关。

background-origin

background-origin 属性定义背景图片根据盒模型的哪个区域来定位。

可用的值有 border-box,图片相对于边框(Border)定位,padding-box,图片相对于内边距框(Padding)定位,content-box,图片相对于内容框(Content)定位。

background-clip

background-clip 属性决定背景绘制区域,也就是背景可以被绘制的区域。像 background-origin 属性一样,它也基于盒模型。

background

最后,background 属性是其他背景相关属性的简写。子属性的顺序并没有影响,因为每个属性值的数据类型不同。然而,对于 background-origin 和 background-clip 属性,如果只指定了一个盒模型区域,会应用到两个属性。如果指定了两个,第一个设置为background-origin 属性。

打赏支持我翻译更多好文章,谢谢!

打赏译者

打赏支持我翻译更多好文章,谢谢!

任选一种支付方式

1 4 收藏 1 评论

关于作者:一杯哈希不加盐「孙腾浩」

毕业于郑州大学软件工程专业,身为 Java 程序猿却同样热爱着 JavaScript 。为了兴趣而写代码,做自己喜欢做的事。Keep coding ... Stay Cool ... 个人主页 · 我的文章 · 30 ·    

相关文章

可能感兴趣的话题



直接登录
最新评论
跳到底部
返回顶部