第 8 章 背景 背景介绍
本作品已使用人工智能进行翻译。欢迎您提供反馈和意见:translation-feedback@oreilly.com
默认情况下,元素的背景区域由内容框、填充框和边框组成,边框绘制在背景之上。(你可以用 CSS 在一定程度上改变这种情况,本章中将会介绍)。
通过 CSS,你可以在元素的背景上应用一种不透明或半透明的纯色,也可以在单个元素的背景上应用一个或多个图像,甚至可以自己描述各种形状的颜色渐变来填充背景区域。
设置背景颜色
要为元素的背景声明 颜色,可使用属性background-color ,该属性可接受任何有效的颜色值。
如果想让颜色从元素的内容区域向外延伸一点,可以添加一些填充,如下面的代码和图 8-1 所示:
p{background-color:#AEA;}p.padded{padding:1em;}
<p>A paragraph.</p><pclass="padded">A padded paragraph.</p>
图 8-1. 背景颜色和填充
您可以为任何元素设置背景色,从<body>一直到内联元素(如<em> 和<a> )。background-color 的值不会被继承。
它的默认值是关键字transparent ,这应该是有道理的:如果一个元素没有定义颜色,它的背景应该是透明的,这样它的祖先元素的背景和内容都是可见的。
要理解这一点,可以想象一个透明的塑料标志安装在有纹理的墙上。透过标牌仍然可以看到墙壁,但这不是标牌的背景,而是墙壁的背景(无论如何,从 CSS 的角度来看)。同样,如果您将页面画布设置为有背景,那么就可以通过文档中所有没有自己背景的元素看到它。
它们并不继承背景;背景通过元素可见。这似乎是一个无关紧要的区别,但正如我们在讨论背景图片时所看到的,这是一个至关重要的区别。
明确设置透明背景
大多数情况下,您没有理由使用关键字transparent,因为这是默认值。但在某些情况下,它还是很有用的。
试想一下,您必须包含的一个第三方脚本将所有图像都设置为白色背景,但您的设计中包含了一些透明的 PNG 图像,而您不希望这些图像的背景是白色的。为了确保以您的设计选择为准,您可以声明如下:
img.myDesign{background-color:transparent;}
如果不这样做(并在图像中添加类),您的半透明图像就不会显示为半透明;相反,它们看起来就像是纯白背景。
在半透明图像上使用合适的背景颜色固然很好,但文字与文字背景颜色之间的良好对比也是必须的。如果文字与背景的任何部分对比度不够,文字就会难以辨认。始终确保文字与背景之间的对比度大于或等于:小文字为 4.5:1,大文字为 3:1。
一般认为,在根元素上声明对比度良好的颜色和背景色是一种好的做法。如果在声明颜色时不声明背景色,CSS 验证器就会生成诸如 "您的background-color 与您的color没有 "之类的警告,提醒您作者与用户之间可能会发生颜色交互,而您的规则没有考虑到这种可能性。警告并不意味着你的样式无效:只有错误才会阻止验证。
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access