<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
mix-blend-mode 是一个 CSS 属性,用来设置元素的内容与其背景内容或父级元素之间的混合模式。
它定义了如何将前景元素的颜色与背景元素的颜色进
mix-blend-mode: darken; 是 mix-blend-mode 的一种混合模式,具体说
mix-blend-mode: darken;
作用:darken 模式会比较前景元素和背景元素对应位置的颜色值,并保留其中较暗的颜色。
也就是说,颜色通道(红色、绿色和蓝色)中的每一个都会选择前景和背景中的较小值,从而产生较暗
使用场景:当你希望一个元素的颜色只影响其背景较亮的部分,而保持较暗的部分不变时,
可以使用 darken 模式。这种模式常用于图片叠加效果、渐变背景,或者在图像处理和艺术设计中制造特殊的效果。
mix-blend-mode 其他常用模式:
normal:默认模式,不进行任何颜色混合。
multiply:前景颜色与背景颜色相乘,通常会产生更暗的颜色。
screen:前景颜色与背景颜色相反相乘,通常会产生更亮的颜色。
overlay:结合 multiply 和 screen 模式,根据背景的亮度决定应用哪种模式。
-->
<style>
/* 白底图片更改背景色方法一 ---通过伪元素来实现 */
.container {
width: 500px;
height: 500px;
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
}
.img-overlay-grey1:after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background: red;
opacity: .03;
pointer-events: none;
}
/* 白底图片更改背景色方法二 --通过CSS 属性 mix-blend-mode:multiply 来实现 */
.img-overlay-grey2 {
background-color: #f6f6f8;
}
.img-overlay-grey2 img {
/* 让图片的白色背景与背景色融合 */
mix-blend-mode: multiply;
}
/* 白底图片更改背景色方法三 --通过CSS 属性 mix-blend-mode:darken */
.img-overlay-grey3 {
background-color: #efefef;
}
.container-image3 {
/* 应用 darken 混合模式 */
mix-blend-mode: darken;
}
</style>
<!-- HTML 示例 -->
<div class="container img-overlay-grey1">
<img
src="https://cdn.shopify.com/s/files/1/0784/0527/1858/files/Main_9129b69a-0c7b-4f66-b6cf-c4222f18028a_500x.jpg?v=1713862888">
</div>
<div class="container img-overlay-grey2">
<img
src="https://cdn.shopify.com/s/files/1/0784/0527/1858/files/Main_9129b69a-0c7b-4f66-b6cf-c4222f18028a_500x.jpg?v=1713862888">
</div>
<div class="container img-overlay-grey3">
<div class="container-image3">
<img
src="https://cdn.shopify.com/s/files/1/0784/0527/1858/files/Main_9129b69a-0c7b-4f66-b6cf-c4222f18028a_500x.jpg?v=1713862888">
</div>
</div>
</body>
</html>
如何将前景元素的颜色与背景元素的颜色进行混合
于 2024-08-15 14:53:11 首次发布