我做了这样的设计
如何用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>
我用的蒙版图片是
你们能告诉我我的代码有什么问题吗? 我知道我只能导入到 png,但我尝试使用 css
最佳答案
您只需要考虑蒙版底部的一张图像,然后对另一部分使用简单的渐变。您也不需要 mask-composite
。只需调整大小/位置,使两个蒙版不重叠:
.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>
关于html - 使用 CSS 屏蔽图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47829139/