css-mask

问题 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

问题 I'm trying to apply a mask-image on the background of an element, but I don't want to mask its children. I've tried to change the z-index without any success. * { box-sizing: border-box; } body { margin: 0; background: #000; } .el { width: 100%; height: 60px; mask-repeat: no-repeat; mask-position: center; background-color: #fff; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cpath d='M100 60c-13.43 0-20.2-11.37-26.74-22.37C67.25

问题 I'm trying to apply a mask-image on the background of an element, but I don't want to mask its children. I've tried to change the z-index without any success. * { box-sizing: border-box; } body { margin: 0; background: #000; } .el { width: 100%; height: 60px; mask-repeat: no-repeat; mask-position: center; background-color: #fff; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cpath d='M100 60c-13.43 0-20.2-11.37-26.74-22.37C67.25

问题 I made a design like this How to mask the background with css? I have tried code like this .img-poster { display: block; max-width: 100%; -webkit-mask-image: url(https://cdn.pbrd.co/images/GYiCod1.png), url(https://cdn.pbrd.co/images/GYiCQsM.png); -webkit-mask-position: bottom center, center center; -webkit-mask-repeat: no-repeat, no-repeat; } .add { -webkit-mask-composite: add; } <section class="section poster-container"> <img src="https://imagejournal.org/wp-content/uploads/bb-plugin/cache

问题 I am attempting to create a faded text effect on scroll where the text at the top and bottom of the element are transparent but the text in the center remains fully opaque. There is also infinitely scrolling text over a video background. Because it is not easy to explain the effect, here is a demo of the effect working only on Chrome so far: Working demo: http://dboxcg.dev.dbox.com/portfolio It's working on chrome (v81.0.4) but breaking on firefox, safari and all mobile browsers. Here is the

问题 Here my demo: https://codepen.io/joondoe/pen/MWwmGwG?editors=0100 In my example I am using CSS but I am open to solutions using SVG also. I have managed to create a border-image with filling content inside. Now I am wondering if it is possible to create a 100% smooth border-image? I mean by that, a border image that automatically reproduce the original border image or nearest possible in a programmatic fashion. In my demo you can see it is pretty OK but there still some aliasing and lags

问题 Here my demo: https://codepen.io/joondoe/pen/MWwmGwG?editors=0100 In my example I am using CSS but I am open to solutions using SVG also. I have managed to create a border-image with filling content inside. Now I am wondering if it is possible to create a 100% smooth border-image? I mean by that, a border image that automatically reproduce the original border image or nearest possible in a programmatic fashion. In my demo you can see it is pretty OK but there still some aliasing and lags

问题 I need to fade paragraph from both top and bottom. But am able to fade from only either of the side. HTML: <p className="bottom-overflow-fade"> {content} </p> CSS: .bottom-overflow-fade { mask-image: linear-gradient(to bottom, black 80%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%); } .top-overflow-fade { mask-image: linear-gradient(to top, black 80%, transparent 100%); -webkit-mask-image: linear-gradient(to top, black 80%, transparent 100%);

问题 I am trying to make in CSS3 rectangular gradient like done with older: filter: alpha(opacity=65, style=3) Unfortunately mask-image property (which i used in order to achieve elliptic ones) does not have rectangular-gradient option. ( pre CSS3 snippet ) .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