试一试
background-image: url("/shared-assets/images/examples/lizard.png");
background-image:
url("/shared-assets/images/examples/lizard.png"),
url("/shared-assets/images/examples/star.png");
background-image:
url("/shared-assets/images/examples/star.png"),
url("/shared-assets/images/examples/lizard.png");
background-image:
linear-gradient(rgb(0 0 255 / 0.5), rgb(255 255 0 / 0.5)),
url("/shared-assets/images/examples/lizard.png");
<section id="default-example">
<div id="example-element"></div>
</section>
#example-element {
min-width: 100%;
min-height: 100%;
padding: 10%;
}
背景图片以堆叠上下文层的方式绘制，彼此堆叠。指定的第一层图片被绘制得好像它最接近用户。
元素的边框绘制在它们之上，background-color 绘制在它们之下。图片相对于盒子及其边框的绘制方式由 background-clip 和 background-origin CSS 属性定义。
如果指定的图片无法绘制（例如，当指定 URI 表示的文件无法加载时），浏览器会像处理 none 值一样处理它。
注意： 即使图片是不透明的，并且在正常情况下颜色不会显示，网页开发者也应该始终指定一个 background-color。如果图片无法加载——例如，当网络中断时——背景颜色将作为备用。
语法
css
/* single image */
background-image: linear-gradient(black, white);
background-image: url("cat-front.png");
/* multiple images */
background-image:
radial-gradient(circle, transparent 45%, black 48%),
radial-gradient(ellipse farthest-corner, #fc1c14 20%, #cf15cf 80%);
/* Global values */
background-image: inherit;
background-image: initial;
background-image: revert;
background-image: revert-layer;
background-image: unset;
每个背景图片都指定为关键字 none 或 <image> 值。
要指定多个背景图片，请提供多个值，并用逗号分隔。
值
无障碍
浏览器不会向辅助技术提供任何有关背景图像的特殊信息。这对于屏幕阅读器来说尤其重要，因为屏幕阅读器不会播报背景图像的存在，因此也不会向其用户传达任何信息。如果图像包含对理解页面整体目的至关重要的信息，最好在文档中以语义化的方式对其进行描述。
此外，重要的是要确保背景图片与前景文本之间的对比度足够高，以便视力低下的人能够阅读页面内容。
颜色对比度是通过比较文本和背景颜色值的亮度来确定的。为了满足网页内容可访问性指南 (WCAG)，正文内容的对比度要求为 4.5:1，对于标题等较大文本，要求为 3:1。大文本定义为 24px 或更大，或者加粗的 18.66px 或更大。
正式定义
| 初始值 | none |
|---|---|
| 应用于 | 所有元素。也适用于 ::first-letter 和 ::first-line。 |
| 继承性 | 否 |
| 计算值 | 按指定，但 <url> 值变为绝对路径 |
| 动画类型 | 离散 |
正式语法
background-image =
<bg-image>#
<bg-image> =
<image> |
none
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]?
<cf-image> =
[ <image> | <color> ] &&
<percentage [0,100]>?
<id-selector> =
<hash-token>
示例
背景图片分层
请注意，星形图片是部分透明的，并分层在猫图片之上。
HTML
html
<div>
<p class="cats-and-stars">This paragraph is full of cats<br />and stars.</p>
<p>This paragraph is not.</p>
<p class="cats-and-stars">Here are more cats for you.<br />Look at them!</p>
<p>And no more.</p>
</div>
CSS
css
p {
font-weight: bold;
font-size: 1.5em;
color: white;
text-shadow: 0.07em 0.07em 0.05em black;
background-image: none;
background-color: transparent;
}
div {
background-image: url("mdn_logo_only_color.png");
}
.cats-and-stars {
background-image: url("star-transparent.gif"), url("cat-front.png");
background-color: transparent;
}
结果
规范
| 规范 |
|---|
| CSS Backgrounds and Borders Module Level 3 # background-image |
浏览器兼容性
加载中…