本文介绍了遮罩图像,从多个渐变创建矩形的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个径向渐变,用作 mask-image 的渐变"图像到背景的 background-color

I have a radial gradient that used as a mask-image "fades" an image in to the background-color behind the image.

mask-image: radial-gradient(ellipse at center, rgba(255,255,255,1) 1%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%);

如何在所有四个侧面上均匀地使用矩形渐变来获得相同的效果?

How do I get the same effect with an evenly rectangular gradient on all four sides?

我知道您可以组合使用渐变,但是我最近的尝试似乎没有任何效果:

I know you can combine gradients and my most current attempt does not seem to have any effect:

img
{
 mask-image:
  linear-gradient(to top, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 50%),
  linear-gradient(to right, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 50%),
  linear-gradient(to bottom, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 50%),
  linear-gradient(to left, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 50%);
}

推荐答案

使用多个蒙版的技巧是控制大小/位置,以便每个元素都可以应用于元素的某个区域:

The trick with multiple mask is to control the size/position so that each one will apply to a region of your element:

.box {
  height:300px;
  width:300px;
  background: url(https://i.picsum.photos/id/1003/300/300.jpg);
  -webkit-mask:
     linear-gradient(to top,    transparent,#fff) top   /100% 20%,
     linear-gradient(to bottom, transparent,#fff) bottom/100% 20%,
     linear-gradient(to left  , transparent,#fff) left  /20% 100%,
     linear-gradient(to right , transparent,#fff) right /20% 100%;
  -webkit-mask-repeat:no-repeat;

  mask:
     linear-gradient(to top,    transparent,#fff) top   /100% 20%,
     linear-gradient(to bottom, transparent,#fff) bottom/100% 20%,
     linear-gradient(to left  , transparent,#fff) left  /20% 100%,
     linear-gradient(to right , transparent,#fff) right /20% 100%;
  mask-repeat:no-repeat;
}

body {
  background:pink;
}
<div class="box"></div>

或者像这样:

.box {
  height:300px;
  width:300px;
  background: url(https://i.picsum.photos/id/1003/300/300.jpg);
  -webkit-mask:
    linear-gradient(to top,  transparent 10%, #fff 15% 90%, transparent 95%),
    linear-gradient(to left, transparent 10%, #fff 15% 90%, transparent 95%);
  -webkit-mask-size:110% 110%;
  -webkit-mask-position:center;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-composite: source-in;


  mask:
    linear-gradient(to top,  transparent 10%, #fff 15% 90%, transparent 95%),
    linear-gradient(to left, transparent 10%, #fff 15% 90%, transparent 95%);
  mask-size: 110% 110%;
  mask-position: center;
  mask-repeat:no-repeat;
  mask-composite: intersect;
}

body {
  background:pink;
}
<div class="box"></div>

相关:如何制作矩形透明渐变CSS3?

这篇关于遮罩图像,从多个渐变创建矩形的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-04 01:22
查看更多