Detailed explanation of the use of filter properties in CSS
|
The filter attribute defines the visual effect of an element blur
brightness Applies a linear multiplication to the image, making it appear lighter or darker. If the value is 0%, the image will be completely black. A value of 100% results in no change to the image. Other values correspond to a linear multiplier effect. Values over 100% are possible, and the image will be brighter than before. If no value is set, the default is 1.
contras tAdjust the contrast of the image. A value of 0% will make the image completely black. At a value of 100%, the image remains unchanged. Values can exceed 100%, meaning a lower contrast will be used. If no value is set, the default is 1.
graycale Convert the image to grayscale. The value defines the scale of the conversion. A value of 100% converts the image completely to grayscale, and a value of 0% leaves the image unchanged. Values between 0% and 100% are linear multipliers of the effect. If not set, the value defaults to 0;
hue-rotate Applies a hue rotation to the image. The "angle" value sets the color wheel angle to which the image will be adjusted. If the value is 0deg, the image will not change. If the value is not set, the default value is 0deg. Although there is no maximum value for this value, a value exceeding 360 degrees is equivalent to going around again.
inver tInvert the input image. The value defines the scale of the conversion. A value of 100% is a complete reversal. A value of 0% results in no change to the image. Values between 0% and 100% are linear multipliers of the effect. If the value is not set, it defaults to 0.
opacity Converts the transparency of the image. The value defines the scale of the conversion. A value of 0% is completely transparent, and a value of 100% leaves the image unchanged. Values between 0% and 100% are linear multipliers of the effect, which is equivalent to multiplying the image samples by the amount. If the value is not set, it defaults to 1. This function is very similar to the existing opacity property, except that some browsers provide hardware acceleration through filters to improve performance.
saturate Convert image saturation. The value defines the scale of the conversion. A value of 0% results in complete desaturation, while a value of 100% results in no change to the image. For other values, they are linear multipliers of the effect. Values over 100% are allowed, giving higher saturation. If the value is not set, it defaults to 1.
sepia Converts the image to sepia. The value defines the scale of the conversion. A value of 100% results in a completely sepia color, and a value of 0% results in no change to the image. Values between 0% and 100% are linear multipliers of the effect. If not set, the value defaults to 0;
drop-shadow Set a shadow effect to the image. Shadows are composited underneath the image, can be blurred, and are offset versions of a mask that can be painted in a specific color. The function accepts values of type <shadow> (defined in CSS3 background), except that the "inset" keyword is not allowed. This function is very similar to the existing box-shadow property; the difference is that through the filter, some browsers will provide hardware acceleration for better performance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
body {
background-color: #000;
color: skyblue;
}
div {
border: 1px solid #fff;
padding: 10px;
width: 610px;
margin: 10px;
}
.blur1 {
filter: blur(0.4px);
}
.blur2 {
filter: blur(1px);
}
.blur3 {
filter: blur(4px);
}
.brightness1 {
filter: brightness(0.30);
}
.brightness2 {
filter: brightness(0.8);
}
.brightness3 {
filter: brightness(1);
}
.contrast1 {
filter:contrast(10%);
}
.contrast2 {
filter:contrast(50%);
}
.contrast3 {
filter:contrast(100%);
}
.grayscale1 {
filter: grayscale(10%);
}
.grayscale2 {
filter: grayscale(50%);
}
.grayscale3 {
filter: grayscale(100%);
}
.huerotate1 {
filter: hue-rotate(0deg);
}
.huerotate2 {
filter: hue-rotate(90deg);
}
.huerotate3 {
filter: hue-rotate(180deg);
}
.invert1 {
filter: invert(20%);
}
.invert2 {
filter: invert(60%);
}
.invert3 {
filter: invert(100%);
}
.opacity1 {
filter: opacity(10%);
}
.opacity2 {
filter: opacity(80%);
}
.opacity3 {
filter: opacity(100%);
}
.saturate1 {
filter: saturate(0.2);
}
.saturate2 {
filter: saturate(0.6);
}
.saturate3 {
filter: saturate(1);
}
.sepia1 {
filter: sepia(10%);
}
.sepia2 {
filter: sepia(60%);
}
.sepia3 {
filter: sepia(100%);
}
.shadow1 {
filter: drop-shadow(2px 2px 2px red);
}
.shadow2 {
filter: drop-shadow(8px 8px 1px purple);
}
.shadow3 {
filter: drop-shadow(1px 1px 10px hotpink);
}
</style>
<body>
<div class="filter1">
<p>Draw Gaussian blur on the image. The larger the value, the blurrier it is.</p>
<ul>
<li class="blur1">blur</li>
<li class="blur2">blur</li>
<li class="blur3">blur</li>
</ul>
</div>
<div class="filter2">
<p>Applies a linear multiplication to the image to make it appear lighter or darker. A value of 0 makes the image completely black; a value greater than 100% makes the image brighter</p>
<ul>
<li class="brightness1">brightness</li>
<li class="brightness2">brightness</li>
<li class="brightness3">brightness</li>
</ul>
</div>
<div class="filter3">
<p>Adjust image contrast. A value of 0 makes the image completely black; values over 100% use even lower contrast</p>
<ul>
<li class="contrast1">contrast</li>
<li class="contrast2">contrast</li>
<li class="contrast3">contrast</li>
</ul>
</div>
<!-- <div class="filter4">
<p>blur</p>
<ul>
<li class="blur1">blur</li>
<li class="blur2">blur</li>
<li class="blur3">blur</li>
</ul>
</div> -->
<div class="filter5">
<p>The image is converted to grayscale. A value of 0 means no change to the image. A value of 100% means it is completely converted to grayscale.</p>
<ul>
<li class="grayscale1">grayscale</li>
<li class="grayscale2">grayscale</li>
<li class="grayscale3">grayscale</li>
</ul>
</div>
<div class="filter6">
<p>Applies hue rotation to the image. When the value is 0deg, the image does not change; there is no maximum value, and exceeding 360deg is equivalent to going around again</p>
<ul>
<li class="huerotate1">huerotate</li>
<li class="huerotate2">huerotate</li>
<li class="huerotate3">huerotate</li>
</ul>
</div>
<div class="filter7">
<p>Invert the input image. 0% means no change to the image, 100% means the image is completely reversed</p>
<ul>
<li class="invert1">invert</li>
<li class="invert2">invert</li>
<li class="invert3">invert</li>
</ul>
</div>
<div class="filter8">
<p>Inverts the transparency of an image. 0%, completely transparent; 100% no image change</p>
<ul>
<li class="opacity1">opacity</li>
<li class="opacity2">opacity</li>
<li class="opacity3">opacity</li>
</ul>
</div>
<div class="filter9">
<p>Converts image saturation. 0% completely unsaturated; 100%, completely saturated</p>
<ul>
<li class="saturate1">saturate</li>
<li class="saturate2">saturate</li>
<li class="saturate3">saturate</li>
</ul>
</div>
<div class="filter10">
<p>The image is converted to sepia. A value of 100% is dark brown; a value of 0% is no change to the image</p>
<ul>
<li class="sepia1">sepia</li>
<li class="sepia2">sepia</li>
<li class="sepia3">sepia</li>
</ul>
</div>
<div class="filter11">
<p>Image settings shadow effect</p>
<ul>
<li class="shadow1">shadow</li>
<li class="shadow2">shadow</li>
<li class="shadow3">shadow</li>
</ul>
</div>
</body>
</html>The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: MySQL high concurrency method to generate unique order number
>>: Echarts sample code for using multiple X-axes to achieve seven-day weather forecast
Recommend
vmware virtual machine ubuntu18.04 installation tutorial
Installation Steps 1. Create a virtual machine 2....
How to use and limit props in react
The props of the component (props is an object) F...
Summary of common problems in downloading and installing MySQL 5.7 on Win7 64-bit
1. Download MySQL from the official website: This...
Vue implements top left and right sliding navigation
Navigation and other things are often used in dai...
Vue implements div wheel zooming in and out
Implement div wheel zooming in and out in Vue pro...
Why Nginx is better than Apache
Nginx has taken over the majority of the Web serv...
The difference between Display, Visibility, Opacity, rgba and z-index: -1 in CSS
We often need to control the hidden, transparent ...
Four categories of CSS selectors: basic, combination, attribute, pseudo-class
What is a selector? The role of the selector is t...
What to do after installing Ubuntu 20.04 (beginner's guide)
Ubuntu 20.04 has been released, bringing many new...
We're driving IE6 to extinction on our own
In fact, we wonder every day when IE6 will really...
Diagram of the process from uninstallation to installation of MySQL 5.7.18 yum under Linux
After a lot of trouble, I finally figured out the...
Detailed explanation of Vue's commonly used built-in instructions
<body> <div id="root"> <...
How to use explain to query SQL execution plan in MySql
The explain command is the primary way to see how...
Detailed explanation of crontab scheduled execution command under Linux
In LINUX, periodic tasks are usually handled by t...
Complete steps to implement location punch-in using MySQL spatial functions
Preface The project requirement is to determine w...