爲什麼background-originn和background-clip爲我正常工作？

我已經檢查過stackoverflow但它並沒有完全解決我的問題。爲什麼background-originn和background-clip爲我正常工作？

從我理解的背景剪輯中可以知道要剪切圖像的哪個部分或哪部分是可視的，例如，如果將背景剪輯設置爲內容框，圖像可能會擴展到內容區域但只有內容區域可以看到，就好像它是背景圖像中的一個窗口。作爲背景源不指定圖像的位置，但它的位置，

因此，如果例如我有背景源設置爲填充框，背景圖像開始填充，而不是邊境。換句話說，背景剪輯控制背景圖像的哪一部分模型背景圖像是可見的，背景源控制圖像開始的框模型的哪一部分。正確？

當我將background-clip設置爲border-box時，然而圖像沒有像我應該理解的那樣在邊框處被裁剪，右邊和左邊到達邊界的邊緣，頂部和底部與填充框一樣夾在內側邊緣。如果我將背景源設置爲填充框，則頂部，底部和左側和右側的截取方式會有所不同，也會出現相同的結果。

此外，如果我將background-origin設置爲內容框，則會導致右側的填充向左右延伸，根據我的理解，該圖像應該開始並保留在內容區域中。我是否理解錯誤或者我做錯了什麼？我很難看到我做錯了什麼，因爲這看起來很直截了當，出於同樣的原因，我沒有看到我可能會錯過理解。

https://jsfiddle.net/eeqso497/6/

div{ 
      background-image: url("https://tse3.mm.bing.net  /th?id=OIP.IspmxU5Ezg8E94QsVE04vgEsDx&pid=15.1&P=0&w=199&h=161"); 
      background-repeat: no-repeat; 
      background-size: cover; 
      background-position: 30%; 
      border: 10px dashed red; 
      width: 150px; 
      height: 150px; 
      padding: 50px; 
      background-clip: border-box; 
      background-origin: content-box; 
}

來源

2017-06-12 taylor Smith

也許你可以更清楚的預期效果是什麼？ –

感謝您的回覆，我沒有尋找任何特定的效果，我只是想了解背景剪輯和背景源，但他們似乎沒有像由stackoverflow和各種其他資源描述的工作，我是試着瞭解問題是什麼。例如，如果它被設置爲背景剪輯，邊框，爲什麼它被剪裁在頂部和底部的填充處，不應該被剪切到所有四邊的邊界而不僅僅是兩邊？ –

好的，我已經添加了一些鏈接，供您閱讀關於這些CSS屬性的內容。 –

我不完全知道你是問什麼，但假設這是你想要的效果：

問題的

部分是，你必須在div周圍填充50px（背景圖像保留在div本身上）。然後，您需要將background-clip設置爲content-box。將其設置爲border-box會導致這樣的：

你的CSS就改成這樣：

div { 
 
    background-image: url("https://tse3.mm.bing.net/th?id=OIP.IspmxU5Ezg8E94QsVE04vgEsDx&pid=15.1&P=0&w=199&h=161"); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-position: 30%; 
 
    border: 10px dashed red; 
 
    width: 150px; 
 
    height: 150px; 
 
    background-clip: content-box; 
 
}

<div> 
 
</div>

CodePen

編輯：由於OP只要想知道如何background-clip和background-origin工作;
https://developer.mozilla.org/en/docs/Web/CSS/background-origin
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

來源

2017-06-12 13:49:32

爲什麼background-originn和background-clip爲我正常工作？

回答

相關問題