css实现图片背景颜色变灰变白

最新推荐文章于 2023-05-10 09:56:03 发布
最新推荐文章于 2023-05-10 09:56:03 发布
阅读量4.8k 收藏 6
点赞数
分类专栏： 小程序 css 文章标签： css filter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48787059/article/details/112004837
版权

黄色图片为原图

1、下图是图片变为灰色
图片变为灰色
下图是图片变为白色

图片变为白色(黄色的为原图）
css代码实现

/*优惠券图片变为灰色 */
.change{
  filter: grayscale(100%);
}
/* 优惠券图片变为白色 */
.img{
  filter: grayscale(100%) brightness(200%);
}

如果有想要知道更多有关知识的，下面推荐一个地址，点击文字即可跳转到相关页面哟！
css样式表：过滤

如果本博客有帮到你，欢迎加关注或者点赞评论哟！

酥唯
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 辐射渐变背景 radial-gradient的实现
12-12
MDN参考资料 核心概念   1. 中心点 就是椭圆或者圆的中心 ...background-image:radial-gradient(形状 尺寸 at 中心位置，初始颜色，颜色+); 以最简单的用法 radial-gradient(red, blue) 来说，其实是下面的简写
CSS背景色渐变写法兼容ie6至ie9
09-25
本文将探讨如何实现CSS背景色渐变，并确保兼容IE6至IE9。 CSS3的`linear-gradient`函数是创建线性渐变的主要工具。例如，从黑色渐变到白色，可以这样编写： ```css .gradient { background: -moz-linear-gradient...
CSS3 background-image颜色渐变的实现代码
09-22
主要介绍了CSS3 background-image颜色渐变的实现代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
通过css让网页颜色变灰白色，默哀
qq_43799531的博客
12-05 850
网页默哀，通过css样式让网页颜色变灰白
如何使用css3进行图片灰白处理，兼容IE(如何使用滤镜)
Guoye的专栏
07-07 2427
如何使用css3进行图片灰白处理兼容IE chrome和firefox浏览器可使用CSS3的滤镜进行实现 img{ -webkit-filter:grayscale(1);} 在IE下可以尝试这个方法 img { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } 再详细的filter滤镜参考下面的网址： ht...
CSS3滤镜——页面黑白灰度处理
Crane的博客
04-08 4067
每当遭遇重大灾难，比如之前的非典、汶川地震，以及前几天清明节对新冠肺炎逝世同胞的哀悼，各大主流网站也会呈黑白两色。今天偶然搜了下实现机制，原来是如此的简单，也对之前不怎么了解的滤镜刮目相看了。 将以下样式代码放到页面中即可实现页面黑白处理，这是CSS3滤镜中的灰度滤镜（grayscale）。 html,body { -webkit-filter: grayscale(1); /* C...
CSS滤镜（网页灰白、图片渐变色）
weixin_30888707的博客
05-13 370
纪念512，可以使网页变黑白，可设置如下代码： body{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}对img图片渐变色通过用JavaScript来控制： 　　　　我们在浏览时会出现这样的一个效果：网页上有一个几乎透明的图像，当鼠标移到图像上时，图像慢慢变清晰；当鼠标移开时，图像又恢复到原来的透明状...
css 各浏览器下的背景色渐变【代码】
09-24
首先，让我们了解一下不同浏览器对CSS背景色渐变的支持情况。在早期，各大浏览器（如IE、Firefox、Chrome、Safari和Opera）都有自己的私有语法来实现这一功能，导致开发者需要编写不同的代码以兼容各个浏览器。随着...
css实现透明渐变特效的示例代码
12-28
知乎发现栏目上的标题图一般都是以下图方式展现的，很显然它是利用渐变去实现的。思路很有意思，主要是要有两方面的认知： 这张图其实可以分成两部分，右边控制图形和渐变，左边就是一张纯色背景，和渐变无关 透明...
css特效：字体与背景反白一例
左直拳的马桶_日用桶
08-20 1299
效果如图： 蓝色背景为渐变透明，只截了前半截。代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>恭喜发财</title> <style> .tit{ position:fixed; left:20px; top:
理解CSS3线性渐变
sd2131512的专栏
05-01 1381
<br />为了显示一个渐变而专门制作一个图片的做法是不灵活的，而且很快会成为一种不好的做法。但是遗憾的是，截至写这篇文章，可能还必须这样做，但是希望不会持续太久。多亏Firefox 和Safari/Chrome，我们现在可以使用最少的努力实现强大的渐变。在本文中，我们将展示CSS渐变的简单实现以及该属性在Mozilla和webkit内核浏览器中的不同。<br /> <br />PS：本文原文本来提供了一个视频，但是由于众所周知的原因，我们无法观看这个在Youtube上的视频，想看的同学请自己想办法观看(最
利用CSS改变图片颜色的多种方法！
weixin_34200628的博客
09-19 3900
前言“说到对图片进行处理，我们经常会想到PhotoShop这类的图像处理工具。作为前端开发者，我们经常会需要处理一些特效，例如根据不同的状态，让图标显示不同的颜色。或者是hover的时候，对图片的对比度，阴影进行处理。”你以为这些是经过PS软件处理出来的？不不不，纯粹的是用css写出来的，很神奇把。强大的 CSS:filterCSS滤镜（filter）属提供的图形特效，像模糊，锐化或元素变色。过滤...
css3灰色渐变,CSS3不一样的渐变
weixin_27012987的博客
08-03 1448
原标题：CSS3不一样的渐变一、 兼容性在IE10+、Firefox19.0+、Chrome26.0+和Opera12.1+等浏览器已完全支持，最好加兼容前缀。二、 渐变类别线性渐变，径向渐变、重复线性渐变和重复径向渐变。线性渐变语法： .gradient {background: linear-gradient(direction, color-stop1, color-stop2, ...)}...
css 图片反色，颜色反色，高斯模糊
学习路上的小刘
08-16 2999
图片反色和颜色反色 <image src="https://kapai.obs.cn-southwest-2.myhuaweicloud.com/back/1629077866599_114.png" class="img"></image> 效果图： css3 属性 filter(滤镜) 1.图片反色，颜色反色 invert(%) 取值范围0%~100% 100%为完全反色，0为显示正常的颜色。 .img{ filter: invert(100%); } 效果图： 图片
关于用css解决触摸图片，图片变色的问题
m0_60121436的博客
10-20 1282
如图，箭头为黑色，需实现触摸方块箭头和字体边框都变成红色 效果图 解决办法 设置两个颜色的箭头图片浮动放在同一位置 另红色的为隐藏 html <div class="but"> <img src="../public/img/向左箭头.png" alt="" class="left"> <img src="../public/img/向左箭头 (1).png" alt="" class="leftred"> 上一节...
鼠标悬停图标反白filter
weixin_55846296的博客
07-15 542
鼠标悬停图标反白 如果只是单纯的鼠标悬停字体跟背景颜色发生变化的话, 很简单, 用几行代码就可以实现: span:hover{ background: #00a84d; color: #fff; } 但是现在需要将图片颜色也改变, 由于UI小姐姐只给了鼠标没有悬停上去的图片, 所以鼠标悬停上去的图片就需要我们自己把这个变色之后的图整出来了. 查了百度,说是有一个简单的方法,只需要在div上添加 filter: brightness(100); 属性即可, 但是效果出来不太理想, 会有色差, 结果
使用css更改img的颜色(变白色、黑色)
最新发布
ycc1111的博客
05-10 3075
1. 变白色2.变黑色。
css改变纯色图片颜色的几种方式
qq_41769047的博客
05-25 2094
公司最近做个项目，碰上了用状态控制图片的展示，图片区别就在于颜色不同，为了网络性能优化，用css进行着色重复利用 方案一 filter: drop-shadow() filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值); 主要是靠制造阴影效果后进行移动加溢出后影藏 <div class="icon-box"> <img src="xxx.png" class="icon" /> </div> <style> .
css实现背景颜色渐变
04-27
可以使用CSS的背景渐变属性`background-image`来实现背景颜色渐变。具体操作如下： 1.使用渐变函数`linear-gradient()`来设置背景颜色渐变的方向和颜色变化范围。 2.将渐变函数作为`background-image`的属性值，并设置其他必要的属性，如背景大小`background-size`和重复方式`background-repeat`等。 示例代码如下： ```css .gradient-bg { background-image: linear-gradient(to bottom, #ffffff, #ffcc99); background-size: 100% 100%; background-repeat: no-repeat; } ``` 这段代码将实现从上到下的背景颜色渐变，起始颜色为白色，结束颜色为浅橙色。`background-size`设置为`100% 100%`是为了让渐变填满整个背景，`background-repeat`设置为`no-repeat`是为了防止重复。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值