css3 奇技淫巧 - 如何给小汽车换个背景色谈起
css3 的魅力,不容小觑。曾经被她折服,再度回首,依旧拜倒在她的石榴裙下。相信在未来,她仍然魅力依旧。
站在巨人的肩上学习,不断提升自身实力。
用 CSS 和颜色选择工具更改图片中的颜色,即如何给小汽车换个背景色。原文地址:12个令人惊叹的CSS实验项目
主要代码展示:
html:
<input type="color" value="#0000ff">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/9284591662_38b0438418_h.jpg">
css3:
html, body { height: 100%; }
body { margin: 0; }img {height: 100%;width: 100%;object-fit: cover;
}input { /* removes default styling from input color element */padding: 0;border: none; /* makes input (color swatch) 100% size of container */position: absolute;width: 100%; height: 100%;/* mix blend mode makes the color of the swatch alter the image behind it. */mix-blend-mode: hue; /* try screen, multiply or other blend modes for different effects */cursor: pointer;
}
实现很简单,就是利用 css 的一个特性:mix-blend-mode: bue 实现的。
对 css3 的颜色混合模式 mix-blend-mode
进行深入了解,参考 谈谈一些有趣的CSS题目(十七)-- 不可思议的颜色混合模式 mix-blend-mode 。
mix-blend-mode 描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。混合模式最常见于 photoshop 中,是 PS 中十分强大的功能之一。该文还覆盖了很多案例。
跟着该文,还学习了很多,比如:
- 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法
- 谈谈一些有趣的CSS题目(四)-- 从倒影说起,谈谈 CSS 继承 inherit
- 谈谈一些有趣的CSS题目(十五)-- 谈谈 CSS 关键字 initial、inherit 和 unset
- 【CSS进阶】box-shadow 与 filter:drop-shadow 详解及奇技淫巧
- ...
该文作者的github:chokcoco/iCSS,上面关于css3等知识也是很多,能深入学习很多。
关于图片变色,在张鑫旭的博客中包好了很多。主要利用的都是 css 的 filter
属性。
- 纯CSS实现任意格式图标变色的研究
- CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产
- PNG格式小图标的CSS任意颜色赋色技术
本文的案例用 css3 的 filter: hue-rotate(220deg)
也能实现换个背景色。
<style>.box img {width: 300px; height: 168px;filter: hue-rotate(220deg);}
</style>
<div class="box"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/9284591662_38b0438418_h.jpg">
</div>
关于颜色的文章:
- CSS前景背景自动配色技术简介
- CSS改变插入光标颜色caret-color简介及其它变色方法
- 3种纯CSS实现中间镂空的12色彩虹渐变圆环方法
- CSS1-CSS3 颜色知识知多少?
- currentColor-CSS3超高校级好用CSS变量
- JS HEX十六进制与RGB, HSL颜色的相互转换
- 小tip: 使用CSS将图片转换成黑白(灰色、置灰)
- 使用CSS3 ::selection伪元素改变文本选中颜色
- 小tip:CSS3下的渐变文字效果实现
- 5分钟快速了解下CSS4 color-adjust属性
ps:css3 的深入学习,张鑫旭的博客,是个学习的好地方,总能学习到很多有用的、有趣的知识,真的是收益颇丰。“CSS相关”目录存档](https://www.zhangxinxu.com/wordpress/category/css/)。比如:
- CSS3 filter:drop-shadow滤镜与box-shadow区别应用
- 常见的CSS图形绘制合集
- 小tips: 纯CSS实现打字动画效果
- CSS3 animation属性中的steps功能符深入介绍
- ...
转载于:https://www.cnblogs.com/EnSnail/p/10371396.html
css3 奇技淫巧 - 如何给小汽车换个背景色谈起相关推荐
- photoshop(ps)换证件照背景色
1.打开证件照,并右击右侧图层,复制出一个图层: 2.关掉原始图层,点击复制出的图层,用魔法棒选择背景色,并删除. 3.将证件照剩下的人物部分复制粘贴到另一个界面,橡皮檫修边缘地带: 4.右下角新建图 ...
- 【Opencv项目实战】背景替换:帮你的证件照换个背景色
文章目录 方法一.基于removebg的背景替换 1.1.removebg介绍 1.2.环境配置 1.3.算法详解 1.4.实战:单张图片背景替换 1.5.实战:多张图片背景替换 1.6.实战:UI自 ...
- 利用css3实现3d立体特效--正方体
其实css3中提供了很多让我们实现非常炫酷的工具,好多特效不需要通过复杂的js代码来实现,而可以通过简单的css3代码来实现,这一次我就给大家介绍一下3d立体盒子的实现以及动画的实现. 要实现这个正当 ...
- Dev c++ 怎么设置背景色
默认的白色太刺眼想换个背景色 教程来了 先看看成果图 (贴纸们也阔以选择不同的样式颜色符合自己的喜好就行) 1.先找到[工具[T]], 并下方找到[编辑器选项[E]] 2.在[编辑器属性]下找到[语法 ...
- 证件照换底色的2个简单方法分享
说到证件照的底色更改,我想对大部分朋友来说是蛮头疼的事情,由于我们不论是在生活还是学习中,有时候总会要上传一些证件照,而当你手上有证件照准备上传时,发现底色不对,是不是很抓狂,现在,我就来给朋友们解决 ...
- 证件照换底色,快试试这3种方法,方便还快捷
由于我们不论是在生活还是学习中,有时候总会要上传一些证件照,而当你手上有证件照准备上传时,发现底色不对,是不是很抓狂,电子证件照片换底色怎么弄?很多小伙伴还在因为证件照底色不对而重新拍?NO!我不许你 ...
- HTML5与CSS3总结
HTML5总结 1.HTML5由W3C和WHAT组织机构共同研发出来的,于2014年正式发布. 2.HTML5成为了新一代网页开发标准. 3.HTML5新特性(面试) 1)增加了audio和video ...
- 不去摄影棚,不用PS,三步快速证件照换底色最简单的方式
证件照对照片的要求非常严格,不同用途的证件照,对照片底色的要求也不相同. 目前,底色要求主要有红.蓝.白三种.为了避免经常去花钱拍照,大家有必要学会 用PS进行底色更换,但是如果仅仅是换证件照底色,学 ...
- 强大的抠图换背景工具
强大的抠图换背景工具 经常会遇到要抠图,换图片背景的时候,这时候PS技术不够强大的你是否在寻找一个便捷有效的方法呢.之前别人给我分享了一个超级nice的网站,完全免费,抠图抠的超级好,特此记录一下,希 ...
最新文章
- Java中的显示锁 ReentrantLock 和 ReentrantReadWriteLock
- 2022年全国硕士研究生招生国家线公布
- 【Linux】Linux服务器(centos7)环境搭建java/python3/nginx
- 你知道生气有多可怕吗?“气死人”是有科学依据的
- 【七】jquery之属性attr、 removeAttr、prop[全选全不选及反选]
- python监听文件更改记录_同事利用Python制作微信机器人自动监控群聊!
- Go Slice 高级实践
- oracle单引号和双引号的区别
- js使用正则分割字符串
- 小学五年级计算机考试试题,小学信息技术考试题库中五年级试题——选择题
- vscode快建创建vue模板
- Android adb 安装apk程序
- h5页面不随微信字体大小改变
- 数据预处理transforms
- python遇到Segmentation fault (core dumped)调试方法
- Linux力挺微博世
- 佐治亚大学计算机科学与工程,2019上海软科世界一流学科排名计算机科学与工程专业排名佐治亚大学排名第401-500...
- duilib学习------网易云信combo控件
- vnc远程工具的使用教程
- 安装linux系统出来7只小企鹅,在Red Hat Linux 9.0下安装小企鹅中文输入法
热门文章
- Windows8应用生命周期 Metro Style Apps Lifecycle
- 关于ContinuationFilter的使用
- Memcached安装和基本使用
- Linux 常见命令
- 这家公司向苹果索赔百亿!一场鏖战八年的专利之争仍未结束
- sklearn 随机分割数据_sklearn.ensemble.RandomForestClassifier 随机深林参数详解
- new一个xssfworkbook时出错_java用poi操作excel的时候,new XSSFWorkbook,总是报错?
- mysql索引commit卡死_mysql 5.6 read-committed隔离级别下并发插入唯一索引导致死锁一例...
- java map可以直接用增强for吗
- 044_Properties工具类