CSS中“ background-color”上的“ background-position”

Question

我正在嘗試在div的背景中使用“ bakground-position”，但無法正常工作。 當背景圖像時，“背景位置”有效，但“背景顏色”無效。 我能做什么？

這是我的CSS：

#defaultContent {
    width: 983px;
    min-height: 382px;
    margin: 0 auto;
    background-color: #000000;
    background-position: right 50px;
}

Answer 1

您可以提供純色背景圖像，從而創建單色漸變：

#defaultContent {
    width: 983px;
    min-height: 382px;
    margin: 0 auto;
    background-image: linear-gradient(#000, #000);
    background-position: right 50px;
    background-repeat: no-repeat;
}

漸變與圖像完全兼容，如果將兩種顏色設置為相同，則它完全等同於純色

演示

Answer 2

您無法放置background-color屬性，因為該屬性會填滿整個空間。 同樣，您不能將background-color與背景圖像一起使用，因為從根本上說，這將用填充的background-color替換您的背景圖像，這時根本沒有理由使用背景圖像！

您是否正在考慮使用漸變，或為背景圖像提供某個濾鏡的濾鏡？ 那將是一個不同的問題。

Answer 3

您可以使用僅適用於背景的div解決方法，通過混合以下position: absolute模擬它position: absolute偏移量和負z-index ..（盡管我僅在chrome中進行了測試）

見小提琴

HTML

<div id="defaultContentParent">
    <div id="defaultContent"></div>
    <div id="defaultContentContent"><div>
</div>

CSS

#defaultContentParent {
    border: 1px solid #00f;
    background-color: #aaa;
    color: #fff;
    position: relative;    
    width: 200px;
    min-height: 140px;
    margin: 0 auto;
    z-index: 0;
}

#defaultContent {
    background-color: #000000;
    height: 50px;
    position: absolute;
        top: 50px;
        right: 0;
    width: 80px;
    z-index: -1;
}

#defaultContentContent {
    z-index: 9999;
}