html 颜色叠加图片,如何在背景图片上添加颜色叠加?

本文探讨了三种不同的CSS背景设计方法:1) 使用半透明单个渐变;2) 添加内阴影;3) 利用`background-blend-mode`进行图片与颜色的混合。通过示例代码展示了如何实现这些效果,帮助开发者提升网页视觉设计的层次感和深度。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

552792d56f9c955b7deeb17ef06af76b.png

一只名叫tom的猫

我看到2个简单的选择:在图像上具有半透明单个渐变的多个背景巨大的插图阴影渐变选项:html {  min-height:100%;  background:linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)), url(http://lorempixel.com/800/600/nature/2);  background-size:cover;}阴影选项:html {  min-height:100%;  background:url(http://lorempixel.com/800/600/nature/2);  background-size:cover;  box-shadow:inset 0 0 0 2000px rgba(255, 0, 150, 0.3);}我的一个旧的Codepen,上面没有几个例子第三种选择使用background-blen-mode:该background-blend-modeCSS属性如何设定一个元素的背景图片应相互以及与元素的背景颜色相混合。html {  min-height:100%;  background:url(http://lorempixel.com/800/600/nature/2) rgba(255, 0, 150, 0.3);  background-size:cover;  background-blend-mode: multiply;}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值