`
neeleon
  • 浏览: 181684 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

用css实现使图片变灰的方法

    博客分类:
  • CSS
阅读更多

用css实现使图片变灰的方法:
1 第一种方法是图片之间的替换,也就是将正常的图片再做成灰色的。这种方法应该是最稳定的了,
但是就要花费时间去做多余的那些图片了。应该算是比较费事的那种。
2 第二种方法,就是用css来解决问题,上网一搜还真有。 将“filter:gray;”添加到图片的样式中就可以了。
这是应用了滤镜的效果。
对于IE用户这个问题是解决了,但在firefox下就不起作用了。问题在于IE有滤镜的支持,而firefox就没有。
后来只能是在firefox下将图片半透明显示,也能起到满意的效果。
看下面的css代码:
"filter:gray; -moz-opacity:.1;opacity:0.1;"
这行代码在IE下图片变为灰色,在firefox下半透明显示。
filter:gray 这个属性只有IE支持,-moz-opacity这个属性firefox低版本支持,opacity高版本支持
”filter: Alpha(opacity=10);-moz-opacity:.1;opacity:0.1;“
这行代码在IE和firefox下都半透明显示

分享到:
评论

相关推荐

    CSS鼠标悬停图片上图片变灰 变色 半透明

    以上就是利用CSS实现鼠标悬停图片时图片变灰、变色和半透明的方法。在实际项目中,可以通过调整参数来适应不同的设计需求,并结合HTML文件中的`<img>`标签引用的图片资源(如压缩包中的`images`目录下的图片),构建...

    css滤镜实现鼠标悬停图片变黑白(灰色).zip

    这个“css滤镜实现鼠标悬停图片变黑白(灰色).zip”压缩包提供了一个实例,展示了如何利用CSS和JavaScript来实现一个交互式的图片处理效果:当鼠标悬停在图片上时,图片会变为黑白(或称灰色)。 首先,我们来看...

    JavaScript 图片点击后变灰色的CSs代码.rar

    在JavaScript和CSS的世界里,实现图片点击后变灰色的效果是一种常见的交互设计,它可以增强用户体验,尤其是在需要禁用或高亮显示元素时。本压缩包"JavaScript 图片后变灰色的CSS代码.rar"提供了实现这一效果的代码...

    DIV+CSS中如何让整个页面变成灰色

    让整个页面变灰的方法之一是通过调整页面所有元素的颜色过滤。这可以通过使用 CSS 的滤镜(filter)属性来实现。滤镜属性允许我们应用不同的视觉效果,如模糊、饱和度调整、颜色转换等。对于灰色效果,我们可以使用 ...

    可以让图片变灰

    要实现“鼠标移上可以让图片变灰”的功能,我们可以使用HTML和CSS结合JavaScript来完成。HTML用于构建基本结构,CSS用于样式控制,而JavaScript则用于处理交互逻辑。 1. **HTML部分**: 创建一个`<img>`元素,并为...

    css使图片变灰的实现方法

    综上所述,实现图片变灰的方法大致有几种: 1. 制作两张图片:一张正常色彩,一张灰度色彩,并在需要时替换显示。 2. 利用CSS的`filter: grayscale()`属性,但只兼容IE浏览器。 3. 对于Firefox及其他不支持`filter: ...

    默认图片是灰色鼠标放上去变彩色css效果代码

    以下是一个简单的例子,展示了如何用CSS实现这个效果: ```html <!DOCTYPE html> 灰色变彩色CSS效果 .grayscale { filter: grayscale(100%); /* 鼠标未悬停时,图片变为灰度 */ -webkit-filter: ...

    默认图片灰色鼠标放上去变彩色css效果代码.rar

    本文将深入探讨如何使用CSS实现一种默认图片为灰色,当鼠标悬停时变为彩色的效果,以及这一技术在JS特效和图片相册中的应用。 首先,我们来理解CSS(Cascading Style Sheets)的作用。CSS是一种样式表语言,用于...

    纯CSS实现的点击显示大图背景变灰图片特效代码

    总结,这个纯CSS实现的图片特效代码通过利用CSS的`:hover`和`:active`伪类,以及`transition`属性,实现了点击显示大图并背景变暗的效果。这不仅可以提高网页的交互性,还能为用户提供更好的视觉体验。对于网页设计...

    Html+css+jquery图片头像,鼠标悬浮点击,变灰色,换肤效果

    /* 图片变灰 */ } .avatar:active { opacity: 0.2; /* 点击时更暗的效果 */ } ``` `transition` 属性添加了平滑过渡效果,`opacity` 控制图片的透明度,从而实现颜色变暗。请注意,这种变暗效果模拟了图片的...

    css滤镜实现鼠标悬停图片变黑白(灰色)

    效果描述: 默认图片是彩色效果,当鼠标悬停在图片上后,图片变成灰白... 使用方法: 1、将css样式引入到你的网页中 2、将body中的代码部分拷贝到你需要的地方即可 (图片采用绝对路径,不建议修改路径)

    css3复选框选中灰色变彩色图片特效代码

    <title>css3复选框选中灰色变彩色图片特效 /* CSS样式将在后面提供 */ 灰度图片" class="check-image"> ``` 在这个例子中,我们有一个`<input type="checkbox">`作为复选框,一个`<img>`标签用于...

    css3复选框选中灰色变彩色图片特效.zip

    要实现图片从灰色到彩色的变换,可以使用伪类`:checked`来检测复选框的状态。同时,可以使用`<input>`元素的`+`或`~`选择器来影响相邻的元素,例如一个包含图片的`<div>`: ```css /* 设置默认状态下的图片 */ ....

    灰色斜纹css网站模板

    8. **优化与性能**:模板可能已考虑到网页性能,如使用CSS sprites减少HTTP请求,合理压缩图片,以及优化CSS代码以提高加载速度。 总的来说,"灰色斜纹css网站模板"是一个包含HTML结构和CSS样式的网页设计资源,...

    css3复选框选中变灰特效

    在本文中,我们将深入探讨如何使用CSS3来创建一个复选框选中变灰的特效。这个特效在用户界面设计中十分常见,可以为用户提供直观的反馈,指示他们已选择或未选择某个选项。让我们逐步解析这个过程。 首先,我们需要...

    jquery图片从灰色到彩色效果

    实现这个效果的基本思路是,首先将图片显示为灰度模式,然后当鼠标悬停在图片上时,通过JavaScript或jQuery来切换图片的CSS滤镜,使其恢复原有的彩色状态。这通常涉及到CSS3的`filter`属性和`grayscale()`函数,以及...

    灰色简洁布局css3模板

    2. **边框与背景**:CSS3允许我们使用圆角边框(`border-radius`),实现无图像的阴影效果(`box-shadow`),以及渐变背景(`linear-gradient`和`radial-gradient`),这些都是创建现代网页外观的重要工具。...

    质感灰色纹理CSS模板

    质感灰色调能够营造出专业、稳重的氛围,同时扁平化设计则强调功能性和易用性,减少了不必要的装饰元素,使界面更加清晰、直观。 CSS(Cascading Style Sheets)是网页样式表语言,用于定义HTML或XML(包括如SVG、...

Global site tag (gtag.js) - Google Analytics