1

我正在尝试使用 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>

4

2 回答 2

2

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

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

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

于 2020-01-09T14:22:36.420 回答
1

它很简单，应用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>

于 2020-01-09T13:15:18.397 回答