背景画像下の勾配は、CSS3

Question

で私が把握することはできません背景画像

の底にこのタイプの勾配を必要とします。コードを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コードを手に入れるのに手伝ってくれる人がいますか？

Answer 1

background: linear-gradient(to bottom, rgba(255,255,255,0), white 100%);をボトムdivに使用してください。

私はあなたのjsfiddleをフォークhere。

Answer 2

このような背景を使用できます。

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

チェックcodepenここでは

Answer 3

あなたは色のアルファを使用してみましたか？

変更し、このようなものに勾配ルール：

.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%); 
} 

編集：下の色のアルファを変更、不透明度プロパティを削除し、効果に多くの高さを与える

Answer 4

css- を変更してみてくださいIあなたのためにした

.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

Answer 5

.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>