CSS如何将图像的底部混合到背景中？
CSS如何将图像的底部混合到背景中？
提问于 2022-09-14 16:14:28
你好，我正在努力获得我在photoshop中所做的效果，但得到的结果与photoshop相同，但只使用css。
http://jsfiddle.net/10b2d5qg/
div {
width: 100vw;
height: 100vh;
background-color: black;
}
img {
width: 400px;
height: 200px;
padding: 10px;
}
p {
color: white;
}<div>
<p>
Unphotoshopped image
</p>
<img src="https://sportshub.cbsistatic.com/i/2022/07/09/c71b7102-f1ec-41b5-8362-5597256779ce/team-fortress-2.jpg" />
<p>
Wanted effect
</p>
<img src="https://i.imgur.com/TAZ8DIM.png" />
</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-09-14 16:21:06
Stack Overflow用户
发布于 2022-09-14 16:22:39
您可以将mask-image & -webkit-mask-image与linear-gradient结合使用
div {
width: 100vw;
height: 100vh;
background-color: black;
}
img {
width: 400px;
height: 200px;
padding:10px;
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}
p {
color: white;
}<div>
<p>
Unphotoshopped image
</p>
<img src="https://sportshub.cbsistatic.com/i/2022/07/09/c71b7102-f1ec-41b5-8362-5597256779ce/team-fortress-2.jpg"/>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73720117
复制相关文章
相似问题
腾讯云开发者
