CSS3混合模式mix-blend-mode/background-blend-mode简介

CSS3混合模式mix-blend-mode/background-blend-mode简介

mix-blend-mode

CSS3混合模式是在CSS2的基础上增加的新特性,用于控制在两个图层重叠时如何混合它们的颜色值。mix-blend-mode属性控制元素的内容与其父元素的背景混合模式,它指定元素内容的混合方式,即将前景层和背景层的颜色进行混合。

混合模式的模式类型

混合模式支持多种类型,常用的包括:

  • normal 混合模式保持不变,前景和背景颜色不混合
  • multiply 以乘法方式混合两个图层的颜色值,产生比原色暗的颜色,常用于阴影和深色背景
  • screen 以屏幕方式混合两个图层的颜色值,产生比原色亮的颜色,常用于滤镜效果
  • overlay 根据背景色调整前景层的颜色,产生高光和阴影效果,常用于透明度的调整
  • soft-light 根据前景层和背景层的颜色信息,调整背景层的颜色,产生柔和的效果,常用于柔化和润色效果。
  • hard-light 根据前景层和背景层的颜色信息,调整背景层的颜色,产生较为硬朗的效果,常用于边缘和线条
  • difference 将两个图层的颜色进行比较,产生反差的颜色效果。
  • exclusion 只有当两个图层的颜色完全相同时,才能产生透明的效果。

混合模式的使用语法

.mix-class{
    mix-blend-mode: normal;
}

混合模式的实际应用

下面是一个利用mix-blend-mode属性和::before内容块实现的柔和的“云雾”效果。代码中,mix-blend-mode: screen;将背景色进行了屏幕混合,达到了柔和的“云雾”效果。

.background {
    width: 100%;
    height: 100vh;
    position: relative;
    background: #999;
}
.background::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: #fff;
    mix-blend-mode: screen;
    opacity: 0.5;
    border-radius: 9999px;
    top: -5%;
    left: -10%;
}

background-blend-mode

background-blend-mode用于控制背景图片的混合模式。如果背景图片不是单一的颜色而是由多张图片合成的,则可以利用background-blend-mode实现各种效果。该属性可以为添加的背景图层指定混合模式,从而实现更丰富的视觉效果。

混合模式的模式类型

mix-blend-mode相似,background-blend-mode也支持多种混合模式类型。

混合模式的使用语法

.background-class{
    background: url(xxx.png), url(xxx.png), ...;
    background-blend-mode: normal;
}

混合模式的实际应用

下面是一个利用background-blend-mode属性实现的百叶窗效果。代码中,背景图片由两张图组成,分别为assets/win-1.jpgassets/win-2.jpg,根据不同的混合模式设置,形成了百叶窗效果。

.background {
    height: 100vh;
    background: url(assets/win-1.jpg), url(assets/win-2.jpg);
    background-repeat: no-repeat, no-repeat;
    background-blend-mode: exclusion, multiply;
    background-size: auto 100%, auto 100%;
}

以上就是CSS3混合模式mix-blend-modebackground-blend-mode的简介以及它们的实际应用。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:CSS3混合模式mix-blend-mode/background-blend-mode简介 - Python技术站

(0)
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • XHTML教程,简单认识XHTML基础知识

    下面是“XHTML教程,简单认识XHTML基础知识”的完整攻略。 什么是XHTML? XHTML全称是可扩展超文本标记语言,是一种用于Web页面描述的标记语言。它目前被广泛使用于网络上,是最新的HTML发展标准。与HTML相比,XHTML更加严谨,更注重页面的结构和语义化。 XHTML的优点 相比传统的HTML,XHTML拥有以下优点: 严谨的语法规范,可以…

    css 2023年6月9日
    00
  • div css 鼠标悬停在div层上时,div背景色改变

    要实现鼠标悬停在 div 层上时,div 的背景色改变,有以下几个步骤: 选中 div 元素 添加:hover 伪类 设置背景色 下面是完整的实现步骤: Step 1:选中 div 元素 首先,我们需要在 HTML 中选中你要实现功能的 div 元素。你可以通过以下的 HTML 代码来创建一个 div 元素: <div class="myDi…

    css 2023年6月9日
    00
  • Dreamweaver制作网页需要掌握哪些小技巧?

    Dreamweaver是一款非常强大的网页制作工具,但有时候出于效率和质量的考虑,需要了解一些小技巧以提高工作效率和制作出更加美观的网页。以下是制作网页时需要掌握的小技巧攻略: 1. 充分利用CSS样式表 CSS样式表是网页制作中非常重要的一部分。对于一些重复出现的样式,应该考虑将其封装成CSS类或CSS ID,这样可以将样式的使用和维护变得更加便捷。 示例…

    css 2023年6月10日
    00
  • JS弹出层遮罩,隐藏背景页面滚动条细节优化分析

    关于“JS弹出层遮罩,隐藏背景页面滚动条细节优化分析”的攻略,我会从以下几个方面进行详细讲解: JS弹出层遮罩的实现思路 隐藏背景页面滚动条的实现思路 细节优化分析 1. JS弹出层遮罩的实现思路 实现思路主要可以分为以下几个步骤: 1.1 创建遮罩层 首先需要创建一个遮罩层,用于遮住页面背景。创建遮罩层可以通过CSS设置来实现,样式如下: #mask { …

    css 2023年6月10日
    00
  • jQuery和CSS仿京东仿淘宝列表导航菜单

    下面是详细讲解“jQuery和CSS仿京东仿淘宝列表导航菜单”的完整攻略。 一、需求分析 设计导航菜单,包含点击切换功能 实现鼠标悬停展开子菜单 导航菜单需要响应式布局 二、技术选型 HTML CSS jQuery 三、技术实现 HTML结构和CSS样式编写 1.1 HTML结构编写 <nav> <ul class="navLis…

    css 2023年6月10日
    00
  • React+TypeScript+webpack4多入口配置详解

    这里就为您详细讲解“React+TypeScript+webpack4多入口配置详解”。 一、概述 在前端开发中,React是目前比较流行的UI库,而TypeScript则是JavaScript的超集,通过在JavaScript基础上增加类型系统等特性,提高了代码的可靠性。 在React和TypeScript项目中,我们通常需要使用webpack作为打包工具…

    css 2023年6月9日
    00
  • WEB前端涉及的布局、结构化和标准化

    下面是关于“WEB前端涉及的布局、结构化和标准化”的完整攻略: 布局 在Web前端开发中,布局是一个重要的概念。布局是指如何在页面上排列、组织并定位各个元素,使它们具有更好的外观和可读性。常见的布局技术包括盒模型布局、浮动、flex布局、网格布局等等。 盒模型布局:盒模型是CSS布局的基础,每个HTML元素都被看作一个盒子。盒模型由四个部分组成,包括元素的内…

    css 2023年6月10日
    00
  • 从零开始学习jQuery (七) jQuery动画实现 让页面动起来

    下面是从零开始学习jQuery (七) jQuery动画实现 让页面动起来的完整攻略。 一、概述 jQuery 动画可以让页面更有活力,增加用户体验。它可以通过改变元素的位置、大小、颜色等,让网页内容更生动有趣。本篇攻略将介绍如何使用 jQuery 实现动画效果。 二、步骤 2.1. 淡入淡出效果 淡入淡出效果是一种常见的动画效果,可以使页面元素在显示和隐藏…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部