背景图像底部渐变与CSS3

Question

我需要在背景图像底部使用此类型渐变

我无法弄清楚 - 如何使用CSS制作此类型渐变。我已将代码上传到jsFiddle。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

此处显示白色渐变但不符合我的预期。

有没有人会帮助我获取确切的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

您是否尝试过在颜色中使用alpha？

将渐变规则更改为：

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

编辑：删除不透明度属性，更改底部颜色alpha并使效果更高

Answer 4

Try changing css- i have done for you

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

do check- 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>

Answer 6

将此样式添加到图像：

mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));