使用 CSS background-blend-mode 创造惊艳的视觉效果

引言

在现代 Web 设计中,CSS 提供了许多强大的属性来增强视觉效果,而 background-blend-mode 就是其中之一。它允许开发者混合背景图像和颜色,创造出类似 Photoshop 的图层混合效果,而无需依赖图片编辑软件。

本文将介绍 background-blend-mode 的基本概念、常见混合模式、浏览器支持、实际应用案例。

background-blend-mode概念

background-blend-mode 是一个 CSS 属性,属性定义了背景层的混合模式(图片与颜色)

基本语法

css 复制代码
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

常见混合模式

background-blend-mode 支持多种混合模式,以下是几种常用的:

混合模式 效果描述
normal 默认模式,不混合
multiply 正片叠底模式,使图像变暗
screen 滤色模式,使图像变亮
overlay 叠加模式
darken 变暗模式
lighten 变亮模式
color-dodge 颜色减淡模式
hard-light 饱和度模式
hue 颜色模式
luminosity 亮度模式

浏览器支持

background-blend-mode 在现代浏览器(Chrome、Firefox、Safari、Edge)中支持良好,但 IE 完全不支持

实际应用案例

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .pic {
        width: 200px;
        height: 200px;
        margin: 50px;
        text-align: center;
        font-size: 42px;
        line-height: 420px;
        float: left;
        background-image: url('img/logo2.jpg');
        background-size: cover;
    }

    .pic1 {
        background-image: url('img/logo2.jpg'), linear-gradient(#f00, #f00);
        background-blend-mode: lighten;
        background-size: cover;
    }

    .pic2 {
        background-image: url('img/logo2.jpg'), linear-gradient(#27be72, #27be72);
        background-blend-mode: lighten;
        background-size: cover;
    }

    .pic3 {
        background-image: url('img/logo2.jpg'), linear-gradient(#f00, #00f);
        background-blend-mode: lighten;
        background-size: cover;
    }
    </style>

</head>
<body>
    <div class="pic">原图</div>
    <div class="pic pic1">红色</div>
    <div class="pic pic2">绿色</div>
    <div class="pic pic3">渐变色</div>
</body>
</html>

渲染效果如下:

结语

background-blend-mode 为 Web 设计提供了强大的视觉控制能力,可以轻松实现双色调、纹理叠加、动态换肤等效果。虽然浏览器兼容性有限,但在现代 Web 项目中,它仍然是一个值得探索的 CSS 特性。

尝试在你的下一个项目中使用它,让你的设计更具创意!

相关推荐
Tachyon.xue23 分钟前
Vue 3 项目集成 Element Plus + Tailwind CSS 详细教程
前端·css·vue.js
FuckPatience1 小时前
Vue 中‘$‘符号含义
前端·javascript·vue.js
东风西巷3 小时前
K-Lite Mega/FULL Codec Pack(视频解码器)
前端·电脑·音视频·软件需求
超级大只老咪4 小时前
何为“类”?(Java基础语法)
java·开发语言·前端
你的人类朋友7 小时前
快速搭建redis环境并使用redis客户端进行连接测试
前端·redis·后端
深蓝电商API7 小时前
实战破解前端渲染:当 Requests 无法获取数据时(Selenium/Playwright 入门)
前端·python·selenium·playwright
bestcxx8 小时前
(二十七)、k8s 部署前端项目
前端·容器·kubernetes
鲸落落丶8 小时前
webpack学习
前端·学习·webpack
excel9 小时前
深入理解 3D 火焰着色器:从 Shadertoy 到 Three.js 的完整实现解析
前端