Home >Web Front-end >CSS Tutorial >CSS achieves image grayscale effect and is compatible with various browsers
CSS achieves image grayscale effect and is compatible with various browsers
- WBOYOriginal
- 2016-05-16 12:07:592064browse
this chapter introduces you to how to use css to achieve grayscale effects on images, and is compatible with various browsers such as 360 browser. it has certain reference value. friends in need can refer to it. i hope it will be helpful to you.
css achieves the grayscale effect of images by making color pictures appear gray through css styles, which is equivalent to adjusting the color mode of an image to grayscale. css can achieve grayscale effects through the following methods .
method 1. ie filter
img { filter: progid:dximagetransform.microsoft.basicimage(grayscale=1); } //标准写法
img { filter:gray; } //简写ie series browsers all this attribute of ie filters is supported, but non-ie browsers do not support it.
method 2. css3 filter
img { -webkit-filter: grayscale(100%); }css3 filters are not yet standard attributes. currently, they are only supported by google chrome and not by other browsers.
the grayscale effect achieved by css can make it easier to implement some special effects on web pages. remember to commemorate the 5.12 major event. did many domestic web pages turn gray overnight due to the earthquake? it can be easily achieved by adding the following style to the website:
html { filter:gray; -webkit-filter: grayscale(100%); }someone must have said that although the grayscale effect of css is good, it cannot be compatible with all browsers. what should i do? ? if you can’t do anything with css, you will definitely think of using js to achieve it. here i recommend a js grayscale effect plug-in:
grayscale.js strong>
how to use:
//引入插件 <script type="text/javascript" src="grayscale.js"></script>
//调用插件
<script type="text/javascript">
window.onload = function(){
var el = document.getElementById( 'body' );
grayscale( el );
};
</script>compatible with all browsers, many inline styles will be added to the element after execution. if you do not have high compatibility requirements, it is recommended to use css to achieve grayscale degree effect.