Как сделать прямоугольный angular градиент прозрачности CSS3?

Question

Я пытаюсь сделать в CSS3 прямоугольник angular градиент, как это было сделано со старыми:

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

К сожалению mask-image свойство ( который я использовал для достижения эллипти c), не имеет опции angular -gradient *.

(до фрагмента 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

К сожалению, свойство mask-image (которое я использовал для получения эллиптических c единиц) не имеет прямоугольной опции angular -gradient.

Вы можете построить ее с помощью множественная маска:

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

Answer 2

Это просто, примените box-shadow: inset и играйте с его значениями, чтобы достичь того, что вы хотите

/* 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>