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

最新推荐文章于 2024-08-07 04:14:46 发布

酥唯

最新推荐文章于 2024-08-07 04:14:46 发布

阅读量4.9k

点赞数

分类专栏：小程序 css 文章标签： css filter

本文链接：https://blog.csdn.net/weixin_48787059/article/details/112004837

版权

小程序同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用CSS代码将图片转换为灰度和白色效果。通过应用`filter`属性，可以轻松地将优惠券图片变为灰色或白色。灰色效果使用`grayscale(100%)`，而白色效果则结合`grayscale(100%)`和`brightness(200%)`。博客还提供了一个链接，供读者进一步了解CSS过滤器相关知识。

摘要由CSDN通过智能技术生成

黄色图片为原图

1、下图是图片变为灰色

下图是图片变为白色

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

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

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

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

酥唯

关注关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS控制图片、表格、背景颜色渐变示例

09-25

总结，CSS控制图片、表格、背景颜色渐变是通过`FILTER`属性在IE中实现，而在其他浏览器中则使用CSS3的`linear-gradient`。在编写代码时，需要注意兼容性的考虑，以确保在不同浏览器上都能呈现预期的效果。尽管`...

CSS 网页背景渐变实现代码

09-25

总的来说，理解并掌握CSS背景渐变的实现方式，无论是对于提升网页的视觉体验还是兼容性处理，都是非常重要的技能。随着技术的发展，CSS3渐变已成为主流，但了解IE的滤镜语法仍然有助于处理遗留的IE兼容性问题。

参与评论您还未登录，请先登录后发表或查看评论

通过css让网页颜色变灰白色，默哀

qq_43799531的博客

12-05

907

网页默哀，通过css样式让网页颜色变灰白

css实现图片变白

weixin_41584401的博客

07-01

8597

在网上找了一些方法，没有达到想要的效果，结果居然自己吓摸出来了原谅我想要仰天大笑，感叹我一下优秀的大脑使用滤镜处理 filter:grayscale(100%)brightness(200%); --先灰度化处理，然后再调节亮度为2倍，如果不够白的话再调亮，过程中可以再加上contrast()对比度调节清晰度注意兼容性写法 ...

CSS之设置页面背景色为浅灰色

最新发布

weixin_40327704的博客

08-07

141

CSS设置页面背景色为浅灰色，代码示例如下：登录后复制 .list { background: #ebedf0; height: 100vh; overflow-y: scroll; overflow-x: hidden; }1.2.3.4.5.6.即可。 ...

CSS “filter：gray;” 图片头像变灰白

xuanjiewu的专栏

11-14

4055

对于IE用户这个问题是解决了，但在firefox下就不起作用了。问题在于IE有滤镜的支持，而firefox就没有。后来只能是在firefox下将图片半透明显示，也能起到满意的效果。 "filter：gray; -moz-opacity:.1;opacity:0.1;" 这行代码在IE下图片变为灰色，在firefox下半透明显示。 filter：gray 这个属性只有IE支持，

如何使用css3进行图片灰白处理，兼容IE(如何使用滤镜)

Guoye的专栏

07-07

2437

如何使用css3进行图片灰白处理兼容IE chrome和firefox浏览器可使用CSS3的滤镜进行实现 img{ -webkit-filter:grayscale(1);} 在IE下可以尝试这个方法 img { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } 再详细的filter滤镜参考下面的网址： ht...

css改变图片颜色

alice_nx的博客

11-17

3038

( x偏移,y偏移,模糊值,颜色) ，比如：filter: drop-shadow(100px 0 0 red);意思就是我们的图标大小是100px，那就x偏移100px，然后需要的图标是红色。五、filter: grayscale(100%) brightness(200%)，如果颜色调整不理想，可以将brightness的百分比继续增加已达到需要的白色效果。因此，我们只需要把目标图标颜色#f4615c作为背景色，然后原始图标（无论什么颜色都可以）作为遮罩图片，效果就出来了。

CSS3 background-image颜色渐变的实现代码

09-22

在CSS3中，`background-image`属性不仅仅限于图片，它还可以使用颜色渐变，来实现更为丰富和动态的背景效果。颜色渐变分为线性和径向两种形式，本篇文章主要介绍线性渐变的实现方法。线性渐变是通过`linear-...

纯CSS3实现的颜色渐变背景效果的实现代码.zip

10-31

为了使背景颜色渐变更加动态，我们还可以利用CSS3的`animation`属性，结合`keyframes`规则来创建动画效果。例如，我们可以让背景颜色渐变循环播放： ```css @keyframes gradient-animation { 0% { background-...

CSS3蓝色渐变几何背景特效

06-24

在CSS中，我们可以用background属性为元素设置背景，包括颜色、图像、渐变等。通过调整背景的位置、重复方式和大小，可以创造出各种不同的效果。在这个特效中，背景的设置使得文字在蓝色渐变的几何形状上显得更加...

CSS3滤镜——页面黑白灰度处理

Crane的博客

04-08

4293

每当遭遇重大灾难，比如之前的非典、汶川地震，以及前几天清明节对新冠肺炎逝世同胞的哀悼，各大主流网站也会呈黑白两色。今天偶然搜了下实现机制，原来是如此的简单，也对之前不怎么了解的滤镜刮目相看了。将以下样式代码放到页面中即可实现页面黑白处理，这是CSS3滤镜中的灰度滤镜（grayscale）。 html,body { -webkit-filter: grayscale(1); /* C...

使用CSS将图片转换成黑白(灰色、置灰)

泥猴桃的博客

08-21

1056

可能早就知道，像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(filter: gray;)，不过，当时，其他浏览器是无解的。不过，时代发展，如今，CSS3的逐步推进，我们也开始看到“黑白效果”大规模应用于实际的可能。图片效果如下代码如下，兼容IE浏览器<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

CSS滤镜（网页灰白、图片渐变色）

weixin_30888707的博客

05-13

387

纪念512，可以使网页变黑白，可设置如下代码： body{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}对img图片渐变色通过用JavaScript来控制：　　　　我们在浏览时会出现这样的一个效果：网页上有一个几乎透明的图像，当鼠标移到图像上时，图像慢慢变清晰；当鼠标移开时，图像又恢复到原来的透明状...

使用CSS将图片转换成黑白(灰色、置灰) & 毛玻璃效果

weixin_30625691的博客

08-30

342

法1⃣️： IE浏览器： filter: gray; 其他浏览器： .gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); ...

css图片/页面显示灰色

wilL-my的博客

08-26

708

img { -webkit-filter: grayscale(100%); /* Webkit */ filter: gray; /* IE6-9 */ filter: grayscale(100%); /* W3C */ } 页面变灰直接在html节点添加grayscale即可页面展示其它品牌logo利用先灰度展示，hover时filter:none;展示原本颜色，再给img加一个transition:all .5s;也有不错的显示效果。 f.

css特效：字体与背景反白一例

左直拳的马桶_日用桶

08-20

1359

效果如图：蓝色背景为渐变透明，只截了前半截。代码如下： <!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:

CSS控制，彩色图片变灰色

猫妖九尾

08-13

9253

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`是为了防止重复。