当前位置:首页 > 前端技术 > 关于一个新的css样式 ,图片的颜色加深模式

关于一个新的css样式 ,图片的颜色加深模式

2022年09月16日 19:35:03前端技术6

前几天遇到一个需求,需要将一张透明背景的图片添加成ps中的混合模式,也就是,透明图片放置于其他图片上面,根据底层图片不同部分的颜色,对应的上层透明图片也显示出不同的颜色。

也就是这样的

关于一个新的css样式 ,图片的颜色加深模式 _ JavaClub全栈架构师技术笔记

在绿色的地方  透明层的山需要变成绿色,在黄色区域,透明层中的山需要变成黄色。

然后就查到了一个 css的属性:mix-blend-mode: color-burn;

于是关于mix-blend-mode  我了解到以下的信息:

关于一个新的css样式 ,图片的颜色加深模式 _ JavaClub全栈架构师技术笔记

参考文章:https://www.mybj123.com/2733.html

作者:a_grain_of_wheat
来源链接:https://blog.csdn.net/a_grain_of_wheat/article/details/106090603

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/42331.html

标签: css
分享给朋友:

“关于一个新的css样式 ,图片的颜色加深模式” 的相关文章

VSCode代码自动补全(html标签、style样式、css属性及值)

VSCode代码自动补全(html标签、style样式、css属性及值、),修改配置文件即可完成! 操作环境 1. 系统window 10 2. 软件VS code 2019汉化 1.按CTRL+SHIFT+P 2.输入搜索Su...

优秀工具推荐:超实用的 CSS 库,样板和框架

优秀工具推荐:超实用的 CSS 库,样板和框架

当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文章中,我编译整理了我最喜欢的 CSS 样板,框架和库,帮助你在建立网站或应用程序时更加高效。   当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文...

css中*的用法

*是代表所有html中的标签 例.写了一个 *{box-sizing:border-box} .span-class{ width:80px; padding:20px; } 结果,span标签的内容宽度是80px,并不是40px...

js修改css样式的方法,js如何设置css样式?js修改css样式的方法

js如何设置css样式?本篇文章就给大家介绍js设置(修改)css样式的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 下面我们就给大家介绍使用javascript是如果设置css样式的。 1、直接设置样式(内联样式) 使...

css实现页面底部固定在屏幕最下方,内容占满屏后紧跟其后的两种方法

1.只针对底部高度固定的情况,不能解决底部高度不固定的情况, 原理:主要内容放在page-main里面,page-container最小高度100%(注意这里html,body高度也要设为100%),position为relative。footer的position为abs...

span标签垂直居中显示的正确方法

span标签居中显示的正确方法 方法一: <span style="text-align: center">水平居中</span> <span style="line-height:值为span的高度">垂直居中...

内联式css样式,直接写在现有的HTML标签中

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> &l...

【HTML&CSS】常用标签以及编写格式

【HTML&CSS】常用标签以及编写格式

一、学习内容回顾 HTML Hyper Text Markup Language:超文本标记语言 超文本:不仅仅是纯文本,还包括字体效果和多媒体(图片/音频/视频) ML标记语言: <开始 属性=“xxx”>标签体 学习HTML主要学习...

css文字重叠解决

css文字重叠解决

DIV+CSS布局文字较多时候重叠下一行文字内容如何解决? 出现原因是因为对li设置了css高度和宽度,当内容比较多是内容会自动换行,而又有高度,这样就造成内容溢出而与下一排内容重叠覆盖现象。 解决方法如下: 第一种,取消高度...

html常用标签以及css基本属性和选择器

html常用标签 一般格式为: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。