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日

相关文章

  • html知识点实践经验总结

    HTML知识点实践经验总结 简介 HTML(英文全名:Hyper Text Markup Language),意为超文本标记语言,是用于创建 Web 页面的编程语言。 在本文中,我将分享我对 HTML 知识点的实践经验,帮助初学者更好地理解 HTML,从而更好地掌握 Web 开发。 基础知识 标签 HTML 中的每个元素都是由标签定义的。标签可用于设置元素的…

    css 2023年6月10日
    00
  • AngularJs表单验证实例详解

    下面是“AngularJS表单验证实例详解”的完整攻略: AngularJS表单验证实例详解 在AngularJS中,表单验证是非常重要的内容。通过表单验证可以确保用户输入的数据符合我们的预期,以及防止一些非法操作。下面是AngularJS表单验证的详细步骤。 1. 导入AngularJS框架 首先,我们需要在HTML页面中导入AngularJS框架。我们可…

    css 2023年6月10日
    00
  • 详解CSS伪元素的妙用单标签之美

    下面是“详解CSS伪元素的妙用单标签之美”完整攻略。 一、简介 CSS伪元素是CSS提供的一种简化HTML结构的方法,它可以让我们在不增加标签的情况下为元素添加装饰或内容。在伪元素出现之前,要实现这样的效果,通常需要增加额外的HTML标签,而伪元素的出现,使这个过程变得更加方便。本文将详细介绍CSS伪元素的用法,以及如何使用单标签实现一些复杂的效果。 二、C…

    css 2023年6月9日
    00
  • 关于《精通css》之几个不错的注意事项

    关于《精通CSS》之几个不错的注意事项 作为一本教授关于CSS部分知识的书籍,《精通CSS》不仅包含了CSS基础知识,也详细讲解了CSS高级特性。在学习此书时,有几个不错的注意事项需要注意: 1. 完整掌握CSS基础知识 CSS基础知识是掌握CSS高级特性的必备基础。这包括CSS选择器,盒模型,浮动,定位等基础概念。只有掌握好这些基础内容,才能更好的理解和应…

    css 2023年6月10日
    00
  • css选中父元素下的第一个子元素(:first-child)

    在 CSS 中,我们可以使用 :first-child 伪类来选中父元素下的第一个子元素。下面是一个完整攻略,包含了如何使用 :first-child 伪类选中父元素下的第一个子元素的过程和两个示例说明。 使用 :first-child 伪类选中父元素下的第一个子元素 我们可以使用 :first-child 伪类来选中父元素下的第一个子元素。下面是一个示例:…

    css 2023年5月18日
    00
  • vue-cli配置flexible过程详解

    下面我将为你详细讲解“vue-cli配置flexible过程详解”的完整攻略。 1. 安装依赖 我们需要安装以下依赖:- postcss-px2rem- lib-flexible 在vue-cli项目中,使用以下命令安装: npm install postcss-px2rem lib-flexible –save-dev 2. 配置postcss 在 vu…

    css 2023年6月11日
    00
  • 六种css3实现的边框过渡效果

    下面是详细讲解“六种css3实现的边框过渡效果”的完整攻略。 1. 边框过渡基础 在进行css3实现的边框过渡效果之前,我们首先需要了解边框过渡的基本概念和方法。 边框过渡的基本概念 边框过渡就是通过css3的transition属性来实现边框的渐变过渡效果,使得边框不再突兀地出现或消失,而是能够以柔和的方式出现或消失。 边框过渡的基本方法 利用css3的t…

    css 2023年6月10日
    00
  • 第一次接触神奇的Bootstrap

    Bootstrap是一种用于创建响应式、移动设备优先的Web应用程序的强大框架。对于新手来说,初次接触Bootstrap可能会感到有些挑战,但只要您按照以下步骤操作,就可以在不到几个小时内学会使用Bootstrap。 步骤一:准备工作 在开始学习Bootstrap之前,您需要执行以下准备工作:1. 确定您的开发环境:您需要一个文本编辑器,一个Web服务器和一…

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