使用 CSS3 的背景图像底部渐变答案

【问题标题】：Background image bottom gradient with CSS3使用 CSS3 的背景图像底部渐变
【发布时间】：2017-08-05 10:13:51
【问题描述】：

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

我不知道如何使用 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;
}

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

这里显示白色渐变，但与我预期的不一样。

有没有人可以帮我获取准确的 CSS 代码？

【问题讨论】：

JS Fiddle 链接-jsfiddle.net/sLhf9on0/2
codepen 链接-codepen.io/djmayank/pen/vJyoVe
渐变和图片可以同时设置。首先是渐变，然后是图片。 jsfiddle.net/sLhf9on0/5
渐变（从上到下）透明到白色

标签： html css linear-gradients

【解决方案1】：

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

我 fork 你的 jsfiddle here。

【讨论】：

感谢您的回答。但是渐变需要更多的高度-prntscr.com/g4np90

【解决方案2】：

你可以像这样使用背景。

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

在此处查看codepen

【讨论】：

【解决方案3】：

尝试更改 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

【讨论】：

【解决方案4】：

你试过在颜色中使用 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%);
}

编辑：移除 opacity 属性，更改底部颜色 alpha 并赋予效果更多高度

【讨论】：

需要更多的渐变高度。这意味着它应该覆盖更多区域。
@user7329515 更改top: 100px 以增加高度。使用更改编辑响应

【解决方案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>

【讨论】：

【解决方案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)));

【讨论】：