背景图像（CSS属性）

描述

此属性通过指定的URI设置元素的背景图像。图像放在背景色的顶部，如果图像不透明，则背景色在其下方不会可见。设置背景图像时，还要在可能的情况下设置背景色，以防图像不可用。 元素的背景是该元素的宽度和高度所覆盖的区域（无论这些尺寸是明确设置的，还是内容决定它们）；它还包括填充和边界覆盖的区域。应用于元素的背景色（或背景图像）将出现在该元素的前景含量下方，以及该元素的填充和边框属性所覆盖的区域。这个覆盖范围很明显，元素具有透明（或点缀 或虚线）边界，背景在边界下（或点之间）。请注意，Internet Explorer版本和包括6个不支持透明边界。 所讨论的元素的某些区域必须可见，以便可以显示背景图像。如果该元素没有内在的高度（由其内容或尺寸定义），则背景将没有任何显示空间。如果元素只包含尚未清理的浮子孩子（请参阅清晰），则背景不会显示，因为该元素的高度将为零。 默认情况下，背景图像放置在元素的左上角（背景位置）。它沿X和Y轴（背景重复）重复，并将与文档一起滚动。这些是如果您没有明确设置任何其他设置，则可以使用其他背景属性进行调整。有关可以用于定位和控制图像的方法，请参阅下面的其他相关内容。

示例

此样式规则分配了一个背景 带有ID“示例”的元素的图像：

#example {
  background-image:
  ➥    url(images/bg.gif);
}

value

URI值 指定可以找到图像的位置。 值不确保不会显示背景图像；这是默认设置，因此您无需明确定义它，除非您要覆盖先前的背景图像声明。 继承的值将导致元素继承其父的背景图像。通常不会采用这种方法，因为该元素的继承背景图像很可能会重叠父母的图像。在大多数情况下，除非设置了另一个背景图像或背景色彩，否则将通过元素的透明背景看到父母的背景图像。

经常询问有关CSS背景图像的问题（常见问题解答）

>如何设置背景图像以覆盖CSS中的整个元素？

以使背景图像覆盖整个元素，您可以使用带有“值'cover”的“背景大小”属性。这将使图像尽可能大以填充容器，同时保持其纵横比。以下是一个示例：

身体{
背景图片：url（'image.jpg'）;
背景 - size：cover; }
>这将使图像封面使图像封面网页的整个主体。

>如何将CSS的背景图像定位在CSS？ 图像。您可以从百分比，像素或关键字（例如“ top”，“底部”，“左”，“右”，“中心”等角度指定位置。这是一个示例：

身体{

背景图片：url（'image.jpg'）;
背景位置：右top;
}
>这将定位图像在车身的右上角。

>如何重复CSS中的背景图像？重复背景图像。值可以是“重复”，“重复X”，“重复Y”或“无重复”。这是一个示例：

身体{

背景图片：url（'image.jpg'）;

background-repeat：repot-x;

}
这将重复图像在整个身体上水平。

如何在CSS中设置多个背景图像？

“背景图像”属性中的每个图像，都被逗号隔开。列表中的第一个图像是最顶层。这是一个示例：

身体{
背景图像：url（'image1.jpg'），url（'image2.jpg'）; }
>这将设置两个背景图像对于身体。

>如何制作CSS中修复的背景图像？

>

图像修复了，因此不会在页面的其余部分滚动。以下是一个示例：

身体{
背景图像：url（'image.jpg'）;
背景：固定;
}
>这将使背景图像成为背景图像固定。

>如何从CSS中的外部URL设置背景图像？以下是一个示例：

身体{
背景图：url（'https：//example.com/image.jpg'）;
}
这将从指定的URL。

>如何为CSS中的背景图像设置后备颜色？在“背景色”属性中指定颜色。如果无法加载背景图像，将显示此颜色。以下是一个示例：

身体{

background-image：url（'image.jpg'）;

background-color：＃f00;
}
这将设置一个红色背景图像的后备颜色。

如何将背景图像与CSS中的背景颜色混合？ CSS允许您将背景图像与背景颜色混合。这是一个示例：

body {

背景图像：url（'image.jpg'）;

background-color：＃f00;

background-blowd-blackend-blend mode：multeply; }
这将使用“乘法”混合模式与红色背景颜色混合。 CSS？

>您可以通过在“背景图像”属性之前指定元素选择器来为特定元素设置背景图像。以下是一个示例：

#myelement {
背景图：url（'image.jpg'）;
}>这将设置带有id'myElement的元素的背景图像'。

>如何为CSS中的伪元素设置背景图像？伪元素通过在“背景图像”属性之前指定伪元素选择器。这是一个示例：

div :: {
content：“”;
background-image：url（'image.jpg'）;
>}
>这将设置该设置'div'元素的“伪元素”之前的背景图像。

以上是背景图像（CSS属性）的详细内容。更多信息请关注PHP中文网其他相关文章！