在编写该代码时,
[color=red]a:link img{
filter:gray;}[/color]
发现图片没有任何变化,则要考虑该浏览器是否兼容,可参考以下代码,在考虑所有浏览器兼容的情况下将图片设置为灰色
/*使图片默认全为灰色*/
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:"";}
[color=brown]a:hover[/color]被称为css的精灵技术,在鼠标路过时就会出现{}里设置的效果
[color=red]a:link img{
filter:gray;}[/color]
发现图片没有任何变化,则要考虑该浏览器是否兼容,可参考以下代码,在考虑所有浏览器兼容的情况下将图片设置为灰色
/*使图片默认全为灰色*/
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:"";}
[color=brown]a:hover[/color]被称为css的精灵技术,在鼠标路过时就会出现{}里设置的效果