如何制作矩形透明度渐变CSS3？

Question

我正在尝试制作 CSS3 矩形渐变，就像旧的一样：

filter: alpha(opacity=65, style=3)

不幸的是mask-image 属性（我用它来实现椭圆形）没有矩形渐变选项。

（前 CSS3 片段）

.foto_1 { filter: alpha(opacity=65, style=0); }
.foto_2 { filter: alpha(opacity=65, style=1); }
.foto_3 { filter: alpha(opacity=65, style=2); }
.foto_4 { filter: alpha(opacity=65, style=3); }

<div class="div_2"><img src="https://i.stack.imgur.com/HGRgk.jpg" alt=""><img class="foto_1" src="https://i.stack.imgur.com/HGRgk.jpg" alt=""></div><div class="div_2"><img src="https://i.stack.imgur.com/HGRgk.jpg" alt=""><img class="foto_2" src="https://i.stack.imgur.com/HGRgk.jpg" alt=""></div><div class="div_2"><img src="https://i.stack.imgur.com/HGRgk.jpg" alt=""><img class="foto_3" src="https://i.stack.imgur.com/HGRgk.jpg" alt=""></div><div class="div_2"><img src="https://i.stack.imgur.com/HGRgk.jpg" alt=""><img class="foto_4" src="https://i.stack.imgur.com/HGRgk.jpg" alt=""></div>

(CSS3 我只能重新创建前 3 张图片)

/* CSS3 */
.foto_1 { filter: opacity(65%); }
.foto_2 { filter: opacity(65%); mask-image: linear-gradient(to left, transparent, black); }
.foto_3 { filter: opacity(65%); mask-image: radial-gradient(circle, black, transparent 65%); }
.foto_4 { filter: opacity(65%); }

<div class="div_2"><img src="https://i.stack.imgur.com/HGRgk.jpg" alt=""><img class="foto_1" src="https://i.stack.imgur.com/HGRgk.jpg" alt=""></div>
 <div class="div_2"><img src="https://i.stack.imgur.com/HGRgk.jpg" alt=""><img class="foto_2" src="https://i.stack.imgur.com/HGRgk.jpg" alt=""></div>
 <div class="div_2"><img src="https://i.stack.imgur.com/HGRgk.jpg" alt=""><img class="foto_3" src="https://i.stack.imgur.com/HGRgk.jpg" alt=""></div>
 <div class="div_2"><img src="https://i.stack.imgur.com/HGRgk.jpg" alt=""><img class="foto_4" src="https://i.stack.imgur.com/HGRgk.jpg" alt=""></div>

Answer 1

Its simple, Apply box-shadow: inset and play with its values to achieve what ever you want

/* CSS3 */

.div_2 {
    -webkit-box-shadow: inset 0 0 29px 38px white;
    box-shadow: inset 0 0 29px 38px white;
    display: inline-block;
}
.div_normal{display: flex;}
  .div_2 img{
 z-index: -1;
    position: relative;
  }

<div class="div_normal">
<div><img src="https://i.stack.imgur.com/HGRgk.jpg" alt=""></div>
<div class="div_2"><img src="https://i.stack.imgur.com/HGRgk.jpg" alt=""></div></div>

<div class="div_normal">
<div><img src="https://i.stack.imgur.com/HGRgk.jpg" alt=""></div>
<div class="div_2"><img src="https://i.stack.imgur.com/HGRgk.jpg" alt=""></div></div>
 <div class="div_normal">
<div><img src="https://i.stack.imgur.com/HGRgk.jpg" alt=""></div>
<div class="div_2"><img src="https://i.stack.imgur.com/HGRgk.jpg" alt=""></div></div>
 <div class="div_normal">
<div><img src="https://i.stack.imgur.com/HGRgk.jpg" alt=""></div>
<div class="div_2"><img src="https://i.stack.imgur.com/HGRgk.jpg" alt=""></div>
</div>

Answer 2

Unfortunately mask-image property (which i used in order to achieve elliptic ones) does not have rectangular-gradient option.

您可以使用多个掩码构建它：

.foto_1 {
  -webkit-mask:
    linear-gradient(to right ,rgba(0,0,0,0.2) ,white ,rgba(0,0,0,0.2)),
    linear-gradient(to bottom,rgba(0,0,0,0.2) ,white ,rgba(0,0,0,0.2));
  mask:
    linear-gradient(to right ,rgba(0,0,0,0.2) ,white ,rgba(0,0,0,0.2)),
    linear-gradient(to bottom,rgba(0,0,0,0.2) ,white ,rgba(0,0,0,0.2));
  -webkit-mask-composite: source-in; /* For Chrome */
  mask-composite: intersect; /* For Firefox */
}

<img src="https://i.stack.imgur.com/HGRgk.jpg" alt="">
<img class="foto_1" src="https://i.stack.imgur.com/HGRgk.jpg" alt="">

更改色标以更好地查看矩形：

.foto_1 {
  -webkit-mask:
    linear-gradient(to right ,rgba(0,0,0,0.2) 20% ,white 20% 80%,rgba(0,0,0,0.2) 80%),
    linear-gradient(to bottom,rgba(0,0,0,0.2) 20%, white 20% 80%,rgba(0,0,0,0.2) 80%);
  mask:
    linear-gradient(to right ,rgba(0,0,0,0.2) 20% ,white 20% 80%,rgba(0,0,0,0.2) 80%),
    linear-gradient(to bottom,rgba(0,0,0,0.2) 20%, white 20% 80%,rgba(0,0,0,0.2) 80%);
  -webkit-mask-composite: source-in; /* For Chrome */
  mask-composite: intersect; /* For Firefox */
}

<img src="https://i.stack.imgur.com/HGRgk.jpg" alt="">
<img class="foto_1" src="https://i.stack.imgur.com/HGRgk.jpg" alt="">

另一种避免前一个角落效应的想法：

.box {
  display:inline-block;
  position:relative;
}
.box:before,
.box:after{
  content:var(--img);
  display:block;
  -webkit-mask:linear-gradient(to var(--d,bottom) ,rgba(0,0,0,0.1) ,white,rgba(0,0,0,0.1));
  mask:linear-gradient(to var(--d,bottom),rgba(0,0,0,0.1) ,white,rgba(0,0,0,0.1));
  clip-path:polygon(0 0,100% 100%,0 100%, 100% 0);
}
.box:after {
  position:absolute;
  top:0;
  left:0;
  --d:right;
  clip-path:polygon(0 0, 100% 100%, 100% 0,0 100%);
}

<div class="box" style="--img:url(https://i.stack.imgur.com/HGRgk.jpg)"></div>

如何制作矩形透明度渐变CSS3？

How to make a rectangular transparency gradient CSS3?

css

opacity

linear-gradients

css-mask