在编写该代码时，
a:link img{
filter:gray;}
发现图片没有任何变化，则要考虑该浏览器是否兼容，可参考以下代码，在考虑所有浏览器兼容的情况下将图片设置为灰色
/*使图片默认全为灰色*/
a:link img{
-webkit-filter: grayscale(<a href="https://www.baidu.com/s?wd=100%25&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3PjT1rHnkmHbvnHf4Phcs0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHn3nHTdnHnLnjDYnWb1PHRYn0" target="_blank" class="baidu-highlight">100%</a>);
-moz-filter: grayscale(<a href="https://www.baidu.com/s?wd=100%25&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3PjT1rHnkmHbvnHf4Phcs0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHn3nHTdnHnLnjDYnWb1PHRYn0" target="_blank" class="baidu-highlight">100%</a>);
-ms-filter: grayscale(<a href="https://www.baidu.com/s?wd=100%25&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3PjT1rHnkmHbvnHf4Phcs0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHn3nHTdnHnLnjDYnWb1PHRYn0" target="_blank" class="baidu-highlight">100%</a>);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
如果想设置为/*在鼠标经过该图片时，将出现原本的图片颜色*/
a:hover img{
-webkit-filter: grayscale(<a href="https://www.baidu.com/s?wd=100%25&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3PjT1rHnkmHbvnHf4Phcs0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHn3nHTdnHnLnjDYnWb1PHRYn0" target="_blank" class="baidu-highlight">0%</a>);
-moz-filter: grayscale(<a href="https://www.baidu.com/s?wd=100%25&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3PjT1rHnkmHbvnHf4Phcs0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHn3nHTdnHnLnjDYnWb1PHRYn0" target="_blank" class="baidu-highlight">0%</a>);
-ms-filter: grayscale(<a href="https://www.baidu.com/s?wd=100%25&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3PjT1rHnkmHbvnHf4Phcs0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHn3nHTdnHnLnjDYnWb1PHRYn0" target="_blank" class="baidu-highlight">0%</a>);
-o-filter: grayscale(0%);
filter: grayscale(0%);
filter:"";}
a:hover被称为css的精灵技术，在鼠标路过时就会出现{}里设置的效果
分享到：
相关推荐
本文将详细介绍如何使用CSS（层叠样式表）实现这种“默认灰色、鼠标悬停变彩色”的效果。 首先，我们需要理解CSS的基本结构。CSS是一种样式表语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的外观...
总的来说，利用CSS和JavaScript的组合，我们可以创建各种吸引人的交互效果，如本文介绍的默认灰色图片转鼠标悬停彩色效果。在图片相册应用中，这种技术尤其有用，因为它可以增加用户与内容的互动，提升网站的吸引力...
这个“css滤镜实现鼠标悬停图片变黑白(灰色).zip”压缩包提供了一个实例，展示了如何利用CSS和JavaScript来实现一个交互式的图片处理效果：当鼠标悬停在图片上时，图片会变为黑白（或称灰色）。 首先，我们来看...
在CSS中，我们可以为所有需要应用该效果的图片设置一个默认的灰度滤镜。例如： ```css .gray-scale { filter: grayscale(100%); -webkit-filter: grayscale(100%); /* 对旧版Safari浏览器的支持 */ } ``` 这...
接下来，我们需要在CSS中定义一个灰色滤镜，使得图片默认显示为灰色。这可以通过CSS的`filter`属性来实现： ```css .gray { filter: grayscale(100%); -webkit-filter: grayscale(100%); /* For Safari 6.0 - 8.0...
默认图片是彩色效果，当鼠标悬停在图片上后，图片变成灰白色 (注意：不兼容IE10) 原理： 其实只要给图片悬停的hover效果加一个样式即可，即 filter: grayscale(100%); 使用方法： 1、将css样式...
在Photoshop中，将彩色图片转化为黑白线描画是一种常见的艺术效果处理，它可以使图片呈现出类似素描或速写的风格。以下将详细讲解如何通过滤镜功能实现这一过程。 首先，选择适合的图像至关重要。理想的图像应具有...
`.clicked`是CSS类，用于在JavaScript中动态添加和移除，以控制图片是否显示为灰色。 接下来，我们来看JavaScript的部分。JavaScript是一种运行在客户端的脚本语言，常用于处理网页的动态行为。在这个场景中，我们...
默认灰色图片"> ``` 这里的`class="gray-scale"`是为了后续CSS选择器使用。 接下来，我们将编写CSS代码来实现这个效果。CSS提供了滤镜（filter）属性，可以用于改变元素的视觉表现。其中，`grayscale()`滤镜可以将...
在这个例子中，我们首先隐藏了图片容器，然后当复选框被选中时，通过`+`选择器展示图片容器，并应用`grayscale(100%)`滤镜使图片变灰。同时，我们添加了`transition`属性，让图片从灰色变为彩色的过程平滑进行。当复...
然后，我们给图片添加了一个`grayscale(100%)`的滤镜，使其呈现灰色。为了实现平滑的过渡效果，我们设置了`transition`属性，当图片从灰色变为彩色时，滤镜变化会在0.3秒内完成。 最后，我们使用了相邻兄弟选择器`+...
首先，将原本通过`<img>`标签或者`background: url()`定义的PNG图片，改为使用CSS背景样式，并添加滤镜代码。例如： ```css height: 65px; width: 198px; filter: progid:DXImageTransform.Microsoft....
首先，我们需要理解描述中的“图片默认为暗灰色”。这可以通过CSS3的滤镜（filter）属性来实现。我们可以使用`opacity`或`brightness`调整图片的透明度或亮度，使得图片在初始状态呈现出暗淡的效果。例如： ```css ...
- 步骤3：应用滤镜>其它>最小值，使用默认参数，使图像线条更加清晰。 - 步骤4：将复制的背景图层的混合模式改为“颜色减淡”，这一步使得图像呈现出素描的黑白效果。完成后，你会看到图片已经成功转化为黑色素描...
为了解决PNG24在IE6中的显示问题，一种常见的方法是通过JavaScript脚本来动态修改页面元素，使用IE6特有的滤镜来加载并显示PNG24图片。这种方法的核心在于利用`AlphaImageLoader`滤镜，它能够处理PNG24格式图片的...
可以通过将蒙版转化为当前选中的通道并应用模糊滤镜，或者将快速蒙版转化为选区后使用“羽化”命令，甚至直接使用模糊或涂抹工具手动处理来控制蒙版的虚化程度。 13. 图层蒙版的使用规则： 黑色在图层蒙版上会使...
- **`add`**：布尔值，默认为`true`，表示是否将图片模糊化成印象派风格。 - **`direction`**：设定模糊的方向，取值范围为0到315度，其中0度代表垂直向上。 - **`strength`**：指定受模糊影响的像素宽度，整数值，...
灰度图片的不透明度被设置为0，使其默认不可见。 接下来，当鼠标移到图片上时，jQuery的`mouseover`事件被触发，使得灰度图片的不透明度逐渐变为1，即原色显现。相反，当鼠标移出图片时，`mouseout`事件使得灰度...