背景圖像底部梯度CSS3

我想不通的底部，這種類型的梯度 - 如何我可以用CSS這種類型的梯度。我上傳了我的代碼jsFiddle。

.single-blog-bg { 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
    height: 350px; 
 
    position: relative; 
 
} 
 

 
.single-blog-bg:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 300px; 
 
    bottom: 0; 
 
    background: linear-gradient(to bottom, white 10%, white 30%, white 60%, white 100%); 
 
    opacity: .5; 
 
}

<div class="single-blog-bg" style="background-image: url(https://i.stack.imgur.com/VT8SR.jpg)"></div>

這裏顯示白色梯度，但不喜歡我的期望。

有沒有人會幫我得到確切的CSS代碼？

來源

2017-08-05 Mofizul I

的JS小提琴鏈路https://jsfiddle.net/sLhf9on0/2/ –

codepen鏈路https://codepen.io/djmayank/pen/vJyoVe – djmayank

兩者梯度和圖像可以一起設置。首先是漸變，然後是圖片。 https://jsfiddle.net/sLhf9on0/5/ –

使用background: linear-gradient(to bottom, rgba(255,255,255,0), white 100%);作爲底部div。

我叉你的jsfiddle here。

來源

2017-08-05 10:18:43

感謝您的回答。但是，漸變需要更高的高度 - http://prntscr.com/g4np90 –

然後只是減少'頂部'。 https://jsfiddle.net/ga57y3n9/2/ –

您可以使用這樣的背景。

background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);

檢查codepen這裏

來源

2017-08-05 10:19:35 Abinthaha

你試過在色彩使用阿爾法？

改變漸變規則是這樣的：

.single-blog-bg:before{ 
    content: ''; 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 100px; 
    bottom: 0; 
    background: linear-gradient(to bottom, rgba(255,255,255,0) 10%, rgba(255,255,255,0.9) 100%); 
}

編輯：刪除opacity屬性，改變底色α和給予效果更高度

來源

2017-08-05 10:21:07 David

需要更多的漸變高度。這意味着它應該覆蓋更多的區域。 –

@ user7329515將'top：100px'更改爲更高的高度。修改後的回覆 – David

嘗試改變CSS- 我已爲您完成

.single-blog-bg { 
    background-size: cover; 
    background-attachment: fixed; 
    height: 350px; 
    position: relative;  
} 
.single-blog-bg:before{ 
    content: ''; 
    position: absolute; 
    display: flex; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    background: linear-gradient(to bottom, rgb(0, 0, 0) 30%, rgb(255, 255, 255) 100%); 
    opacity: .5; 
}

確實檢查 - https://codepen.io/djmayank/pen/vJyoVe

來源

2017-08-05 10:29:27 djmayank

這對你有用嗎？ – djmayank

.single-blog-bg { 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
    height: 350px; 
 
    position: relative; 
 
    } 
 
.single-blog-bg:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    /*top: 300px*/ 
 
    bottom: 0; 
 
    background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 10%, rgba(255, 255, 255, 0.13) 60%, rgba(255, 255, 255, 0.04) 70%); 
 
    /* opacity: .5; */ 
 
    height: 100%; 
 
} 
 
    opacity: .5; 
 
}

<div class="single-blog-bg" style="background-image: url(https://images.unsplash.com/photo-1495935225637-fa5838607df7?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=)"> 
 
</div>

來源

2017-08-05 10:36:13 Droid

背景圖像底部梯度CSS3

回答

相關問題