如何在图像上创建响应式淡化效果

Question

我正试图在图像的左侧和底部实现淡化效果，如下结果：

我尝试过这样：box-shadow: inset 0 0 85px 50px #f5f7fc但是在Firefox上，它并不像你期望的那样工作。我该怎么办？

Answer 1

您可以考虑这样的渐变：

＆＃13;

＆＃13;

.img {
  width:400px;
  height:400px;
  background:
  linear-gradient(to top, #f5f7fc 10%, transparent 30%),
  linear-gradient(to right, #f5f7fc 10%, transparent 30%),
  url(https://lorempixel.com/400/200/) 0 0 /cover no-repeat;
}

＆＃13;

<div class="img">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以使用这段代码，在这里我添加了渐变＆＃34;之前和之后＆＃34;在css。

HTML：

<div class="gradient">
    <img src="images/1.jpg" alt="images" />
</div>

CSS：

img {
    max-width: 100%;
}

.gradient {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    overflow: hidden;
}

.gradient:before,
.gradient:after {
    content: '';
    position: absolute;
    left: 0;
}

.gradient:before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    bottom: 0;
    height: 50%;
    width: 100%;
}

.gradient:after {
    width: 25%;
    background: linear-gradient(-90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    top: 0;
    height: 100%;
}