用CSS遮盖图像 [英] masking image with CSS
本文介绍了用CSS遮盖图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我做了这样的设计
如何使用CSS遮罩背景?
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/23466317216_b99485ba14_o-panorama.jpg" alt="" class="img-poster add img-responsive">
</section>
我使用的蒙版图像是
https://i.stack.imgur.com/fg2k5.png
https://i.stack.imgur.com/zmylJ.png
你们能告诉我我的代码有什么问题吗?我知道我可以导入到png,但是我尝试使用CSS
Can you guys tell me what is wrong in my code? I know I can just import to png, but I tried to use css
推荐答案
您只需要考虑一个图像,即蒙版的底部,然后对另一部分使用简单的渐变即可.您也不需要 mask-composite
.只需调整大小/位置,以使两个遮罩都不会重叠:
You only need to consider one image which is the bottom part of your mask then use a simple gradient for the other part. You also don't need mask-composite
. Simply adjust the size/position so that both mask don't overlap:
.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>
这篇关于用CSS遮盖图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文