Article directory
foreword
When a major event occurs, some friends will find: "Why is a certain APP gray? Could it be that there is a problem with the phone?" Then they open other APPs and find: "It's all gray! Got it, it seems to be There's something big happening... Hurry up and turn on the news."
text
So, for front-end development, what effects can't be achieved with code? Let's study how to set the gray theme.
website example
Let's look at the main station, set it up like this, it will...be grayed out!
Other sites can do the same. Such as Taobao mobile terminal:
After removing it, it lights up again and returns to normal (in order to show that there is nothing serious now, let me restore it, in case it misleads you...):
core code
In fact, the core is: filterattributes! It is a new property of CSS3 called "filter".
CSS code:filter: grayscale(100%);
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
grayscale(amount)The official explanation of the function is: it will change the grayscale of the input image.
amount is the variable whose value defines the ratio of the conversion. A value of 100% converts the image completely to grayscale, a value of 0% leaves the image unchanged. A value between 0% and 100% is a linear multiplier for the effect. If no value is set, the default is 0.
You can set it like this in js: document.getElementById("myImg").style.WebkitFilter, you can try it with reference to the following code:
<!DOCTYPE html>
<html>
<body>
<p>点击按钮修改图片的颜色为黑白 (100% 灰度)。</p>
<button onclick="myFunction()">尝试一下</button><br>
<img id="myImg" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<script>
function myFunction() {
document.getElementById("myImg").style.WebkitFilter = "grayscale(100%)";
}
</script>
</body>
</html>
Original effect:
After clicking the button:
Attachment:
Link to try online: https://www.runoob.com
More usage methods: https://www.runoob.com/cssref/css3-pr-filter.html