使用自定义属性管理多个背景
CSS自定义属性的一大优势在于它们可以作为值的组成部分。假设您正在使用多个背景来实现设计效果。每个背景都将拥有自己的颜色、图像、重复方式、位置等属性,这可能会导致代码冗长!
假设您有四个图像:
body { background-position: top 10px left 10px, top 10px right 10px, bottom 10px right 10px, bottom 10px left 10px; background-repeat: no-repeat; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-left.svg), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-right.svg), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-right.svg), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-left.svg); }
登录后复制
现在您想在媒体查询中添加第五个背景:
@media (min-width: 1500px) { body { /* 重复所有现有背景,然后添加第五个。 */ } }
登录后复制
这将非常冗长!您必须再次重复所有四个图像,然后再添加第五个。大量的代码重复!
一种方法是为基本背景集创建一个变量,然后更简洁地添加第五个背景:
body { --baseBackgrounds: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-left.svg), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-right.svg), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-right.svg), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-left.svg); background-position: top 10px left 10px, top 10px right 10px, bottom 10px right 10px, bottom 10px left 10px; background-repeat: no-repeat; background-image: var(--baseBackgrounds); } @media (min-width: 1500px) { body { background-image: var(--baseBackgrounds), url(added-fifth-background.svg); } }
登录后复制
或者,您可以为每个背景图像创建一个变量,然后根据需要将它们组合在一起,这可能更清晰易于管理:
body { --bg1: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-left.svg); --bg2: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-right.svg); --bg3: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-right.svg); --bg4: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-left.svg); --bg5: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-left.svg); background-image: var(--bg1), var(--bg2), var(--bg3), var(--bg4); } @media (min-width: 1500px) { body { background-image: var(--bg1), var(--bg2), var(--bg3), var(--bg4), var(--bg5); } }
登录后复制
以下是一个基本版本,包含支持查询:
动态地更改值的特定部分是 CSS 自定义属性的一大优势!
此外,对于背景,最好将整个简写形式作为变量包含在内。这样,更容易一次性将所有内容组合在一起,而无需像这样:
--bg_1_url: url(); --bg_1_size: 100px; --bg_1_repeat: no-repeat; /* etc. */
登录后复制
将所有属性放入简写形式并根据需要使用会更容易:
body { --bg_1: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-left.svg) top 10px left 10px / 86px no-repeat; --bg_2: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-right.svg) top 10px right 10px / 86px no-repeat; --bg_3: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-right.svg) bottom 10px right 10px / 86px no-repeat; --bg_4: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-left.svg) bottom 10px left 10px / 86px no-repeat; background: var(--bg_1), var(--bg_2), var(--bg_3), var(--bg_4); }
登录后复制
就是这样。
以上是使用自定义属性管理多个背景的详细内容。更多信息请关注PHP中文网其他相关文章!
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章
刺客信条阴影:贝壳谜语解决方案
1 个月前
By DDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
3 周前
By DDD
在哪里可以找到原子中的起重机控制钥匙卡
1 个月前
By DDD
如何修复KB5055523无法在Windows 11中安装?
2 周前
By DDD
Inzoi:如何申请学校和大学
3 周前
By DDD

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

关于Flex布局中紫色斜线区域的疑问在使用Flex布局时,你可能会遇到一些令人困惑的现象,比如在开发者工具(d...
