使用 CSS 遮蔽图像
masking image with CSS
我做了这样的设计
如何使用 css 屏蔽背景?
我试过这样的代码
.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/23466317216_b99485ba14_o-panorama.jpg" alt="" class="img-poster add img-responsive">
</section>
我用的mask图是
https://i.stack.imgur.com/fg2k5.png
https://i.stack.imgur.com/zmylJ.png
你们能告诉我我的代码有什么问题吗?
我知道我只能导入到 png,但我尝试使用 css
您只需要考虑蒙版底部的一张图像,然后对另一部分使用简单的渐变。您也不需要 mask-composite
。只需调整 size/position 使两个掩码不重叠:
.img-poster {
display: block;
max-width: 100%;
-webkit-mask:
linear-gradient(#fff,#fff) top,
url(https://i.ibb.co/5WvbqgG/zmylJ.png) bottom;
-webkit-mask-size:
100% calc(100% - 30px),
auto 30px;
-webkit-mask-repeat: repeat-x;
mask:
linear-gradient(#fff,#fff) top,
url(https://i.ibb.co/5WvbqgG/zmylJ.png) bottom;
mask-size:
100% calc(100% - 30px),
auto 30px;
mask-repeat: repeat-x;
}
<section class="section poster-container">
<img src="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg" alt="" class="img-poster add img-responsive">
</section>
SVG+滤镜解决方案
用于在图像中创建锯齿状边缘的 SVG
解决方案不需要使用具有锯齿状边缘的图案的光栅图像。
因此,这种 SVG 解决方案可以应用于任何图像并使其具有自适应性。
考虑使用同一张图片创建锯齿状边缘 2 次。
过滤器应用于下方图像,因此,它变得更大一些。
原始图像叠加在顶部,因此边缘上的牙齿变得可见。
为了只在下缘留下牙齿,我们用侧缘上的面罩剪掉不需要的牙齿。
.container {
width:90vw;
height:90vh;
}
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 1800 900" >
<defs>
<mask id="msk1">
<rect x="100%" y="100%" fill="white" />
<rect x="1700" y="0" width="50" height="900" fill="white" />
</mask>
<filter id="displacementFilter">
<feTurbulence type="turbulence" baseFrequency="0.01 0.01"
numOctaves="2" result="turbulence" seed="1"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic"
scale="65" xChannelSelector="R" xChannelSelector="G" yChannelSelector="B"/>
</filter>
</defs>
<!-- The image is processed by a filter and therefore overall dimensions have increased due to the height of the teeth -->
<image filter="url(#displacementFilter)" xlink:href="https://i.stack.imgur.com/paWbQ.jpg.jpg" width="1700" height="850" />
<rect mask="url(#msk1)" x="1700" y="0" width="50" height="900" fill="white" />
<!-- The same original image, but without filters -->
<image x="0" xlink:href="https://i.stack.imgur.com/paWbQ.jpg.jpg" width="1700" height="850" />
</svg>
</div>
另一张图片
.container {
width:90vw;
height:90vh;
}
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 1800 900" >
<defs>
<mask id="msk1">
<rect x="100%" y="100%" fill="white" />
<rect x="1700" y="0" width="50" height="900" fill="white" />
</mask>
<filter id="displacementFilter">
<feTurbulence type="turbulence" baseFrequency="0.01 0.01"
numOctaves="2" result="turbulence" seed="1"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic"
scale="75" xChannelSelector="R" xChannelSelector="G" yChannelSelector="B"/>
</filter>
</defs>
<!-- The image is processed by a filter and therefore overall dimensions have increased due to the height of the teeth -->
<image filter="url(#displacementFilter)" xlink:href="https://i.stack.imgur.com/kaYSe.jpg" width="1700" height="850" />
<rect mask="url(#msk1)" x="1700" y="0" width="50" height="900" fill="white" />
<!-- The same original image, but without filters -->
<image x="0" xlink:href="https://i.stack.imgur.com/kaYSe.jpg" width="1700" height="850" />
</svg>
</div>
我做了这样的设计
如何使用 css 屏蔽背景?
我试过这样的代码
.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/23466317216_b99485ba14_o-panorama.jpg" alt="" class="img-poster add img-responsive">
</section>
我用的mask图是
https://i.stack.imgur.com/fg2k5.png
https://i.stack.imgur.com/zmylJ.png
你们能告诉我我的代码有什么问题吗? 我知道我只能导入到 png,但我尝试使用 css
您只需要考虑蒙版底部的一张图像,然后对另一部分使用简单的渐变。您也不需要 mask-composite
。只需调整 size/position 使两个掩码不重叠:
.img-poster {
display: block;
max-width: 100%;
-webkit-mask:
linear-gradient(#fff,#fff) top,
url(https://i.ibb.co/5WvbqgG/zmylJ.png) bottom;
-webkit-mask-size:
100% calc(100% - 30px),
auto 30px;
-webkit-mask-repeat: repeat-x;
mask:
linear-gradient(#fff,#fff) top,
url(https://i.ibb.co/5WvbqgG/zmylJ.png) bottom;
mask-size:
100% calc(100% - 30px),
auto 30px;
mask-repeat: repeat-x;
}
<section class="section poster-container">
<img src="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg" alt="" class="img-poster add img-responsive">
</section>
SVG+滤镜解决方案
用于在图像中创建锯齿状边缘的 SVG
解决方案不需要使用具有锯齿状边缘的图案的光栅图像。
因此,这种 SVG 解决方案可以应用于任何图像并使其具有自适应性。
考虑使用同一张图片创建锯齿状边缘 2 次。 过滤器应用于下方图像,因此,它变得更大一些。 原始图像叠加在顶部,因此边缘上的牙齿变得可见。 为了只在下缘留下牙齿,我们用侧缘上的面罩剪掉不需要的牙齿。
.container {
width:90vw;
height:90vh;
}
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 1800 900" >
<defs>
<mask id="msk1">
<rect x="100%" y="100%" fill="white" />
<rect x="1700" y="0" width="50" height="900" fill="white" />
</mask>
<filter id="displacementFilter">
<feTurbulence type="turbulence" baseFrequency="0.01 0.01"
numOctaves="2" result="turbulence" seed="1"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic"
scale="65" xChannelSelector="R" xChannelSelector="G" yChannelSelector="B"/>
</filter>
</defs>
<!-- The image is processed by a filter and therefore overall dimensions have increased due to the height of the teeth -->
<image filter="url(#displacementFilter)" xlink:href="https://i.stack.imgur.com/paWbQ.jpg.jpg" width="1700" height="850" />
<rect mask="url(#msk1)" x="1700" y="0" width="50" height="900" fill="white" />
<!-- The same original image, but without filters -->
<image x="0" xlink:href="https://i.stack.imgur.com/paWbQ.jpg.jpg" width="1700" height="850" />
</svg>
</div>
另一张图片
.container {
width:90vw;
height:90vh;
}
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 1800 900" >
<defs>
<mask id="msk1">
<rect x="100%" y="100%" fill="white" />
<rect x="1700" y="0" width="50" height="900" fill="white" />
</mask>
<filter id="displacementFilter">
<feTurbulence type="turbulence" baseFrequency="0.01 0.01"
numOctaves="2" result="turbulence" seed="1"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic"
scale="75" xChannelSelector="R" xChannelSelector="G" yChannelSelector="B"/>
</filter>
</defs>
<!-- The image is processed by a filter and therefore overall dimensions have increased due to the height of the teeth -->
<image filter="url(#displacementFilter)" xlink:href="https://i.stack.imgur.com/kaYSe.jpg" width="1700" height="850" />
<rect mask="url(#msk1)" x="1700" y="0" width="50" height="900" fill="white" />
<!-- The same original image, but without filters -->
<image x="0" xlink:href="https://i.stack.imgur.com/kaYSe.jpg" width="1700" height="850" />
</svg>
</div>