css - - - - - 去除图片默认的白色背景(混合模式 mix-blend-mode)

1. 需求描述

图片含有白色地图,想要将其去掉

2. 原图展示

在这里插入图片描述

3. 原代码展示

<div>
	<img src='*****'/>
</div>

<style>
	div{
	
	}
</style>

4. 使用混合模式(mix-blend-mode)

<div>
   <img src='*****'/>
</div>

<style>
   div{
   	mix-blend-mode: multiply;
   }
</style>

5.修改后效果

在这里插入图片描述

注意
mix-blend-mode属性需要给图片元素的直接父元素添加!!!!

### CSS `mix-blend-mode` 属性详解 #### 一、什么是 `mix-blend-mode` CSS 属性 `mix-blend-mode` 描述了设置元素与其直接父元素的背景如何混合,通过不同的属性值,可以创建诸如叠加、滤色等多种视觉效果[^1]。 #### 二、支持的属性值及其作用 该属性接受多种模式作为其取值,每种模式都定义了一种特定的方式让两个图层相互影响: - **normal**: 默认值。无特殊混合行为。 - **multiply** (正片叠底): 结果颜色不会比原颜色更亮。黑色乘任何色都是黑;白色则保持不变。 - **screen** (屏幕): 效果正好相反于 multiply。结果总是较浅的颜色。 - **overlay** (叠加): 综合了 multiply 和 screen 的特性,取决于底层颜色是深还是浅。 - ... 更多其他选项如 darken, lighten, color-dodge 等也提供了丰富的可能性[^2]. #### 三、实例展示 为了直观感受这些不同模式带来的变化,这里给出几个简单的例子说明如何应用此属性: ##### 实现文字镂空效果 ```html <div class="backdrop"> <p class="text">Water</p> <div class="overlay"></div> </div> <style> .backdrop { position: relative; } .text { font-size: 7em; margin: 0; padding: 0; z-index: 1; } .overlay { background-color: rgba(0,255,255,.1); mix-blend-mode: multiply; /* 应用了multiply混合模式 */ width: 100%; height: 100%; position: absolute; top: 0; } </style> ``` 上述代码片段展示了当我们将一个半透明蓝色覆盖在一个文本之上并设置了 `mix-blend-mode: multiply` 后所得到的文字镂空样式[^4]。 ##### 创建双背景图像合成 另一个有趣的案例是在同一个容器内同时加载两张图片,并利用 `background-blend-mode` 来控制它们之间的交互方式: ```css .blend { height: 100vh; background-image: url('image1.jpg'), url('image2.jpg'); background-blend-mode: multiply; /* 使用multiply模式进行两幅图间的融合 */ background-size: cover; } ``` 这段样式的目的是使两张照片按照指定的比例相乘在一起形成新的色调组合[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值