關於'background-image'屬性中具有相同值的多個背景圖像;

-3

.div{ 
 
      width: 200px; 
 
      height: 200px; 
 
      border-top:20px solid black; 
 
      border-bottom:20px solid black; 
 
      background-position: 0%,100%; 
 
      -webkit-background-size: 20px 100%; 
 
      -moz-background-size: 20px 100%; 
 
      background-size: 20px 100%; 
 
      background-repeat: no-repeat; 
 
      background-image: linear-gradient(to bottom, red, green), linear-gradient(to bottom, red, green); 
 
     }

<div class="div"></div>

當我使用多背景，爲什麼設置在background-image屬性的值相同，但第一背景圖像不被第二image.I覆蓋感到很困惑，任何人都知道嗎？在此先感謝;

好吧，對不起，沒有人能夠理解這個問題，也許是因爲我的描述太糟糕了。我的均值是我設置兩個值與線性漸變的背景圖像「屬性設置兩個背景圖片，看看這個：

background-image:linear-gradient(to bottom, red, yellow),linear-gradient(to bottom, red, yellow);

並設置其他背景屬性相同，看看這個：

background-position:0%,100%; 
background-size:20px 100%;

好吧，這兩個背景圖片的所有屬性都是相同的，所以第一個背景圖片應該覆蓋第二張圖片，但不是，它們顯示在左側和右側，爲什麼？

來源

2016-09-29 Anan

阿南你好，你的問題是很難理解。請考慮使用完整的，語法正確的問題陳述句子。 –

我們無法首先理解您的查詢改善您的問題如果可能的話，您可以分享屏幕截圖或粗略草圖，以確定您正在尋找什麼？所以我們可以幫助你。 –

只搜索我認爲是你的問題：你應該看看[這個關於多個背景的鏈接]（http://www.css3.info/preview/multiple-backgrounds/）。 – jeerbl

這種風格

background-size:20px 100%;

意味着背景的水平尺寸爲20像素。由於只有一個值，它適用於兩個漸變。

這等風格

background-position:0%,100%;

有2個值，所以第一個應用於第一梯度。在這種情況下，位置0％表示完全離開。第二個適用於第二個漸變，在這種情況下，100％表示完全正確。

這種差異也適用於垂直的位置，但由於坡度的大小爲100％，它不具有任何影響

來源

2016-09-29 14:25:02 vals

太棒了！官方網站解釋了background-position屬性設置了背景圖像的起始位置。但我不知道何時有多個背景圖像，它設置了多個起點;謝謝！ – Anan

關於'background-image'屬性中具有相同值的多個背景圖像;

回答

相關問題