背景圖像（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中文網其他相關文章！