css更改图片颜色

css更改图片颜色,比较时候颜色单一的图片,比如logo之类的 css中的 filter 属性定义元素(通常是 <img>)的视觉效果(如模糊和饱和度)

img{
-webkit-filter: invert(51%) sepia(94%) saturate(6433%) hue-rotate(190deg) brightness(93%) contrast(101%);
filter: invert(51%) sepia(94%) saturate(6433%) hue-rotate(190deg) brightness(93%) contrast(101%);
}

这个代码片段是CSS样式,用于在网页上为图片元素 (img) 添加一系列的滤镜效果。具体来说,它通过 -webkit-filterfilter 属性来实现这些效果。下面是每个滤镜的具体含义:

  1. invert(51%):将图像的颜色反转51%。即把图像的颜色变为它们的补色,反转比例为51%。

  2. sepia(94%):将图像转换为深褐色调,类似于旧照片效果,深褐色比例为94%。

  3. saturate(6433%):增加图像的饱和度,使颜色更加鲜艳,饱和度为原来的6433%。

  4. hue-rotate(190deg):改变图像的色相,将色相顺时针旋转190度。

  5. brightness(93%):调整图像的亮度,使图像的亮度变为原来的93%。

  6. contrast(101%):调整图像的对比度,使对比度变为原来的101%。

这些滤镜组合在一起,可以产生独特的视觉效果,可能用于特定的设计需求或视觉效果。

滤镜函数

注释:使用百分比值(例如 75%)的滤镜,也接受该值是十进制(例如 0.75)。

滤镜描述
none默认值。规定无效果。
blur(px)

对图像应用模糊效果。较大的值将产生更多的模糊。

如果为指定值,则使用 0。

brightness(%)

调整图像的亮度。

  • 0% 将使图像完全变黑。
  • 默认值是 100%,代表原始图像。
  • 值超过 100% 将提供更明亮的结果。
contrast(%)

调整图像的对比度。

  • 0% 将使图像完全变黑。
  • 默认值是 100%,代表原始图像。
  • 超过 100% 的值将提供更具对比度的结果。
drop-shadow(h-shadow v-shadow blur spread color)

对图像应用阴影效果。

可能的值:

  • h-shadow - 必需。指定水平阴影的像素值。负值会将阴影放置在图像的左侧。
  • v-shadow - 必需。指定垂直阴影的像素值。负值会将阴影放置在图像上方。

blur -可选。这是第三个值,单位必须用像素。为阴影添加模糊效果。值越大创建的模糊就越多(阴影会变得更大更亮)。不允许负值。如果未规定值,会使用 0(阴影的边缘很锐利)。

spread - 可选。这是第四个值,单位必须用像素。正值将导致阴影扩展并增大,负值将导致阴影缩小。如果未规定值,会使用 0(阴影与元素的大小相同)。

注释:Chrome、Safari 和 Opera,也许还有其他浏览器,不支持第 4 个长度;如果添加,则不会呈现。

color - 可选。为阴影添加颜色。如果未规定,则颜色取决于浏览器(通常为黑色)。

这个例子创建了红色的阴影,水平和垂直方向均为 8px,带有 10px 的模糊效果:

filter: drop-shadow(8px 8px 10px red);

提示:这个滤镜类似 box-shadow 属性。

grayscale(%)

将图像转换为灰阶。

  • 0% (0) 是默认值,代表原始图像。
  • 100% 将使图像完全变灰(用于黑白图像)。

注释:不允许负值。

hue-rotate(deg)

在图像上应用色相旋转。该值定义色环的度数。默认值为 0deg,代表原始图像。

注释:最大值是 360deg。

invert(%)

反转图像中的样本。

  • 0% (0) 是默认值,代表原始图像。
  • 100%将使图像完全反转。

注释:不允许负值。

opacity(%)

设置图像的不透明度级别。opacity-level 描述了透明度级别,其中:

  • 0% 为完全透明。
  • 100% (1) 是默认值,代表原始图像(不透明)。

注释:不允许负值。

提示:这个滤镜类似 opacity 属性。

saturate(%)

设置图像的饱和度。

  • 0% (0) will make the image completely un-saturated.
  • 100% is default and represents the original image.
  • Values over 100% provides super-saturated results.

注释:不允许负值。

sepia(%)

将图像转换为棕褐色。

  • 0% (0) 是默认值,代表原始图像。
  • 100% 将使图像完全变为棕褐色。

注释:不允许负值。

url()

url() 函数接受规定 SVG 滤镜的 XML 文件的位置,并且可以包含指向特定滤镜元素的锚点。实例:

filter: url(svg-url#element-id)

initial将此属性设置为其默认值。参阅 initial。
inherit从其父元素继承此属性。参阅 inherit。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/50060.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

面试前端实习常问的关于【ES6新特性】的问题

ES6新特性 日常前端代码开发中&#xff0c;有哪些值得用 ES6 去改进的编程优化或者规范? 常用箭头函数来取代有this指向的函数常用 let 取代 var 命令常用数组/对象的结构赋值来命名变量&#xff08;结构更清晰&#xff0c;语义更明确&#xff0c;可读性更好&#xff09;在长字…

【C语言报错已解决】“Undefined Reference”

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 引言&#xff1a; 在开发过程中&#xff0c;我们经常会遇到各种编译错误或运行时错误。其中&#xff0c;“Undefined Referenc…

Axure Web端元件库:从Quick UI到500+组件的飞跃

在快速变化的数字世界中&#xff0c;产品设计不仅仅是功能的堆砌&#xff0c;更是用户体验的精心雕琢。原型设计作为产品开发过程中的关键环节&#xff0c;其重要性不言而喻。Axure&#xff0c;作为业界领先的原型设计工具&#xff0c;凭借其强大的交互设计和丰富的功能&#x…

Rce漏洞复习(ctfshow29-50)

Rce漏洞简介思维导图 Web29 代码审计&#xff1a; if(!preg_match("/flag/i", $c)){ eval($c); 传参没有flag&#xff08;大小写都没有出现&#xff09; Payload&#xff1a; ?csystem("ls"); ?csystem("tac *lag.php"); Web30 代码…

ubuntu2004 android webRTC编译环境搭建

一、官网下载VMware Workstation Pro16&#xff0c;下载地址&#xff0c;安装教程 二、下载ubuntu2004镜像&#xff0c;下载地址 三、webrtc编译 安装depot_tools 步骤如下 wget https://dl.google.com/android/repository/commandlinetools-linux-6609375_latest.zip unzi…

如何减少白屏的时间

前端性能优化是前端开发中一个重要环节&#xff0c;它包括很多内容&#xff0c;其中页面的白屏时间是用户最初接触到的部分&#xff0c;白屏时间过长会显著影响用户的留存率和转换率。 我们以一个 APP 内嵌 Webview 打开页面作为例子&#xff0c;来分析页面打开过程以及可优化…

文件上传漏洞(ctfshow web151-161)

Web151 F12修改源代码 exts后面png改为php 这样就可以上传php的文件了 Web152&#xff1a; 考点&#xff1a;后端不能单一校验 就是要传图片格式&#xff0c;抓个包传个png的图片 然后bp抓包修改php后缀解析 然后放包 Web153-web156 在php代码中可以使用“{}”代替“[]” …

如何防御IP劫持

摘要 IP劫持是一种网络攻击方式&#xff0c;攻击者通过各种手段获取对某个IP地址的控制权&#xff0c;并将其用于恶意目的。这种攻击可能会导致数据泄露、服务中断等严重后果。本文将介绍IP劫持的基本概念、攻击方式以及防御策略&#xff0c;并提供一些实际的代码示例。 IP劫…

WPF项目实战视频《二》(主要为prism框架)

14.prism框架知识&#xff08;1&#xff09; 使用在多个平台的MVVM框架 新建WPF项目prismDemo 项目中&#xff1a;工具-NuGet包管理&#xff1a;安装Prism.DryIoc框架 在git中能看Prism的结构和源代码&#xff1a;git链接地址 例如&#xff1a;Prism/src/Wpf/Prism.DryIoc.Wpf…

机器学习 | 回归算法原理——随机梯度下降法

Hi&#xff0c;大家好&#xff0c;我是半亩花海。接着上次的多重回归继续更新《白话机器学习的数学》这本书的学习笔记&#xff0c;在此分享随机梯度下降法这一回归算法原理。本章的回归算法原理还是基于《基于广告费预测点击量》项目&#xff0c;欢迎大家交流学习&#xff01;…

uniapp中出现图片过小会与盒子偏离

结论&#xff1a;在image的父盒子中加上display: flex&#xff0c;原因不清楚 出问题的代码和图片如下&#xff1a; <template><view style" background-color: greenyellow; height: 10rpx;width: 10rpx;"><image :src"imgSrc.seatnull" …

Ubuntu22.04使用NVM安装多版本Node.js和版本切换

Fabric官方目前支持Node.js开发区块链应用&#xff0c;建议使用Node长期支持版本&#xff08;LTS&#xff09;。 建议使用NVM安装Node.js&#xff0c;NVM可以帮助我们方便的在Node的不同版本之间进行切换&#xff0c;这样我们就可以同时工作在不同的项目上。 下面是安装的脚本…

Java中的Console对象:增强程序与用户交互的利器(readPassword()、readLine(),printf() 和format() )

在Java编程语言中&#xff0c;System.console() 方法扮演着尝试获取与当前运行的Java应用程序相关联的控制台&#xff08;Console&#xff09;对象的角色。这个控制台对象&#xff0c;如果成功获取&#xff0c;为程序提供了一个与用户进行交互的界面&#xff0c;无论是读取输入…

嵌入式C++、MQTT、数据库、Grafana、机器学习( Scikit-learn):智能建筑大数据管理平台(代码示例)

项目概述 智能建筑管理系统&#xff08;Intelligent Building Management System, IBMS&#xff09;是一个集成多种技术的复杂系统&#xff0c;旨在通过智能化手段提升建筑的管理效率、节能效果和居住舒适度。该系统涉及嵌入式系统、物联网&#xff08;IoT&#xff09;、大数据…

【数据库】 mysql基础语法学习(详细教程)

1. 数据库的基本操作1.1. MYSQL 登录与退出输入 mysql -uroot -p -P3306 -h127.0.0.1退出的三种方法mysql > exit;mysql > quit;mysql > \q;1.2. MYSQL 数据库的一些解释注意&#xff1a;数据库就相当于文件夹表就相当于文件1.3. mysql 注释符有三种&#xff1a;1、#.…

光明乳业:以科技赋能品质,引领乳业绿色新未来

近日&#xff0c;光明乳业再次成为行业焦点&#xff0c;其在科技创新与绿色发展方面的卓越表现赢得了广泛赞誉。作为中国乳制品行业的领军企业&#xff0c;光明乳业始终坚守品质至上的原则&#xff0c;不断探索科技创新之路&#xff0c;致力于为消费者提供更高品质、更健康的乳…

vdb:虚拟数据库

将文件虚拟成数据库&#xff0c;序列化写入、反序列化读取、直接读取。

Adobe正通过数字体验改变世界

在当今这个数字化飞速发展的时代&#xff0c;Adobe公司正以其创新的技术和卓越的产品引领着创意设计领域的变革。从Adobe发布的生成式AI工具&#xff08;Adobe Firefly&#xff09;&#xff0c;到Illustrator和Photoshop的新AI功能&#xff0c;再到广受认可的Adobe国际认证&…

GLSL教程 第5章:光照和材质

目录 5.1 光照模型基础 5.2 Phong光照模型 5.3 Blinn-Phong光照模型 5.4 Cook-Torrance光照模型 5.5 Lambert光照模型 5.6 材质属性的深入讲解 小结 光照和材质是计算机图形学中至关重要的元素&#xff0c;它们共同决定了渲染图像的视觉效果。光照模型用于模拟光源与物体…

政安晨【零基础玩转各类开源AI项目】基于Ubuntu系统部署LivePortrait :通过缝合和重定向控制实现高效的肖像动画制作

目录 项目论文介绍 论文中实际开展的工作 非扩散性的肖像动画 基于扩散的肖像动画 方法论 基于Ubuntu的部署实践开始 1. 克隆代码并准备环境 2. 下载预训练权重 3. 推理 快速上手 驱动视频自动裁剪 运动模板制作 4. Gradio 界面 5. 推理速度评估 社区资源 政安…