背景圖像上的徑向漸變圓疊加

Question

我正在嘗試在CSS中的背景圖片頂部應用尺寸為徑向漸變的圓。 每當我應用漸變線時，它都不會執行任何操作-我的圖層似乎混亂了。

/* HTML Styles */
html {
    background-image: url("image1.jpg");
    background-attachment: fixed;
}

/* Body Styles */

body {

    background-image: url("image2.jpg");
    background: radial-gradient(circle closest-corner at 40% 70%, white 15%, 
    rgba(151, 151, 151, 0.5) 50%);

}

Answer 1

您需要將它們附加在與您要覆蓋第一個background-image代碼相同的背景屬性中，並且僅考慮漸變。 另外，請確保您尊重順序， 第一個是頂層 。

 body { margin:0; height:100vh; background: radial-gradient(circle closest-corner at 40% 70%, white 15%, rgba(151, 151, 151, 0.5) 50%), url("https://lorempixel.com/400/200/") center/cover; } 

您也可以使用這種語法（上面的是簡寫形式） ：

 body { margin:0; height: 100vh; background-image: radial-gradient(circle closest-corner at 40% 70%, white 15%, rgba(151, 151, 151, 0.5) 50%), url("https://lorempixel.com/400/200/"); background-size: auto, cover; background-position:center; }