Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
766 views
in Technique[技术] by (71.8m points)

css - Mask Image, create rectangle from multiple gradients

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%);
}
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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://picsum.photos/id/1003/300/300);
  -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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...