製作背景圖像的漸變

我想一個梯度添加到我的CSS背景圖像。我發現了一堆關於對於具有梯度的背景下，具有圖像坐在上面的其他職位，但我想圖像本身是一個梯度。我嘗試這樣做：製作背景圖像的漸變

body { 
margin: 0; 
width: 100%; 
height: 100%; 
font-family: rexlia; 
background-size: cover; 
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url(cubes.jpg) no-repeat; 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65))), url(cubes.jpg) no-repeat; 
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url(cubes.jpg) no-repeat; 
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url(cubes.jpg) no-repeat; 
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url(cubes.jpg) no-repeat; 
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url(cubes.jpg) no-repeat;

}

所有然而，這是顯示未修改的圖像。這個snippit實際上來自另一個帖子，顯然它工作。雖然不適合我。任何人都可以對此有所瞭解嗎？謝謝。

來源

2016-02-28 user3226170

http://www.colorzilla.com/gradient-editor/ – Martin

最後一行：'來bottom'？我認爲這是一個錯字或水手。 – Chris

@克里斯不......這對垂直梯度正確的語法。 –

我想這是這是只有你正在使用，那麼你已經省略，使html元件100％高大，以便body也可以是100％高大的代碼。

html { 
 
    height: 100%; 
 
} 
 
body { 
 
    margin: 0; 
 
    width: 100%; 
 
    min-height: 100%; 
 
    background-size: cover; 
 
    background-image: linear-gradient(to bottom, rgba(255, 0, 0, .5) 0%, rgba(255, 0, 0, .5) 59%, rgba(0, 0, 255, 0.65) 100%), url(http://lorempixel.com/image_output/technics-q-c-640-480-2.jpg); 
 
}

JSfiddle Demo

來源

2016-02-28 23:21:26

好了，所以我想除了我已經改成了灰色和白色做了漸變色，差異是如此微小，我甚至不能告訴，這是以前的工作。當我使用上面的默認顏色時，我可以看到它。但是就這樣說來，我在這裏所得到的並不是我想要的。我想要做的是褪色的圖像右出什麼（所以它只是變淡白色的頂部和消失......）。那可能嗎？還是在圖像被添加之前必須將圖像格式化？ – user3226170

另外，我怎樣才能使HTML高度100％？不會，它會根據頁面內容自動設置它的大小嗎？通過將body設置爲100％，它將佔用html塊的大小？ – user3226170

如果您刪除margin:0;它的工作原理和梯度strippes圖像（因爲defaut保證金身體開始填充html），或添加html{height:100%;}它的工作原理。

HTML或機構背景mixe如果一起兩個標籤中

一些測試沒有設定，所以你可以看到和理解的行爲

body { 
 
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.75) 100%), url(http://lorempixel.com/300/200/abstract/10) center no-repeat; 
 
    background-size: cover, cover; 
 
} 
 
html:hover body { 
 
    margin: 4em; 
 
    /* gradient is repeated and takes margin value as reference to repeat itself in html background */ 
 
}

如果身體有內容或有效高度固定的，它的工作方式相同

body { 
 
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.75) 100%), url(http://lorempixel.com/300/200/abstract/10) center no-repeat; 
 
    background-size: cover, cover; 
 
} 
 
html:hover body { 
 
    margin: 4em; 
 
    /* gradient is repeated body's height and keeps being repetead in html background*/ 
 
    height: 100px;

如果添加HTML，身體{身高：100％;}然後身體有一個有效的高度。

html, body {height:100%;} 
 
body { 
 
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0, 0) 59%, rgba(0, 0, 0, 0.75) 100%), url(http://lorempixel.com/300/200/abstract/10) center no-repeat; 
 
    background-size: cover, cover; 
 
}

最後，如果你給一個背景值，以HTML，身體會在自身保持自己的背景。

html{background:lime;} 
 
body { 
 
padding:2em; 
 
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0, 0) 59%, rgba(0, 0, 0, 0.75) 100%), url(http://lorempixel.com/300/200/abstract/10) center no-repeat; 
 
    background-size: cover, cover; 
 
}

來源

2016-02-28 23:31:54

製作背景圖像的漸變

回答

相關問題