This is the third day of my participation in Gwen Challenge
The filter attribute
The filter CSS attribute applies graphical effects such as blur or color offset to elements. Filters are usually used to adjust images, backgrounds and border renderings.
The original image
Blur blur (px)
The Gaussian blur function applies gaussian blur to the input image. The larger the value is, the more blurred it is. The default value is 0. The unit is px. Percentage values are not accepted.
.img {
margin-left: 50px;
filter: blur(5px);
}
Copy the code
Luminance brightness (%)
Function applies a linear multiplier to the input image to darken or brighten it. A value of 0% generates an all-black image. A value of 100% remains constant. A value of more than 100% is ok, and the image will be brighter than before. If no value is set, the default is 1. You can use percentages or you can use numbers.
.img1 {
margin-left: 50px;
filter: brightness(0%);
}
.img2 {
margin-left: 50px;
filter: brightness(50%);
}
.img3 {
margin-left: 50px;
filter: brightness(1);
}
.img4 {
margin-left: 50px;
filter: brightness(2);
}
Copy the code
Contrast (%) contrast
Adjust the contrast of the input image. If it’s 0 percent, it grays out. The value is 100%. The graph stays the same. Values can exceed 100%, meaning lower comparisons will be applied. If no value is set, the default value is 1. You can use percentages or you can use numbers.
.img1 {
margin-left: 50px;
filter: contrast(0%);
}
.img2 {
margin-left: 50px;
filter: contrast(50%);
}
.img3 {
margin-left: 50px;
filter: contrast(1);
}
.img4 {
margin-left: 50px;
filter: contrast(2);
}
Copy the code
Drop-shadow (x offset, Y offset, blur range, color) drop shadow
X offset,y offset (mandatory). These are the two
values that set the shadow offset. If both values are 0, the shadow appears directly after the element. Fuzzy range (optional). The larger the value, the more ambiguous it is. The shadows get bigger and lighter. Negative value is not allowed. If this parameter is not set, the default value is 0. Color (optional). See
.img1 {
margin-left: 50px;
filter: drop-shadow(16px 16px);
}
.img2 {
margin-left: 50px;
filter: drop-shadow(16px 16px 10px);
}
.img3 {
margin-left: 50px;
filter: drop-shadow(16px 16px 10px black);
}
.img4 {
margin-left: 50px;
filter: drop-shadow(16px 16px 40px black);
}
Copy the code
Gray grayscale (%)
Will change the input image grayscale. If the value is 100%, the image will be converted to gray scale completely, and if the value is 0%, the image will have no change. Values between 0% and 100% are linear multipliers of the effect. More than 100% has the same effect as 100%. If this parameter is not set, the default value is 0. You can use percentages or you can use numbers.
.img1 {
margin-left: 50px;
filter: grayscale(0%);
}
.img2 {
margin-left: 50px;
filter: grayscale(0.5);
}
.img3 {
margin-left: 50px;
filter: grayscale(100%);
}
.img4 {
margin-left: 50px;
filter: grayscale(2);
}
Copy the code
Hue -rotate(deg) Hue rotation
Apply hue rotation to the image. Angle – Sets the Angle of the color ring at which the image will be adjusted. If the value is 0deg, the image has no change. If the value is not set, the default value is 0deg. While there is no maximum value, anything above 360deg is like going around again.
.img1 {
margin-left: 50px;
filter: hue-rotate(0deg);
}
.img2 {
margin-left: 50px;
filter: hue-rotate(180deg);
}
.img3 {
margin-left: 50px;
filter: hue-rotate(360deg);
}
.img4 {
margin-left: 50px;
filter: hue-rotate(450deg);
}
Copy the code
Invert (%) Invert the image
Invert the input image. The value of amount defines the scale of the conversion. 100% value is completely reversed. If the value is 0%, the image has no change. A value between 0% and 100% is a linear multiplier of the effect. If no value is set, the default value is 0.
.img1 {
margin-left: 50px;
filter: invert(10%);
}
.img2 {
margin-left: 50px;
filter: invert(50%);
}
.img3 {
margin-left: 50px;
filter: invert(100%);
}
.img4 {
margin-left: 50px;
filter: invert(150%);
}
Copy the code
The transparency of the opacity (%)
Convert the transparency of the image. The value of amount defines the scale of the conversion. A value of 0% indicates complete transparency, while a value of 100% indicates no change in the image. If the value is not set, the default value is 1. This function is similar to the existing opacity property.
.img1 {
margin-left: 50px;
filter: opacity(10%);
}
.img2 {
margin-left: 50px;
filter: opacity(50%);
}
.img3 {
margin-left: 50px;
filter: opacity(100%);
}
.img4 {
margin-left: 50px;
filter: opacity(150%);
}
Copy the code
Saturate saturation (%)
Function to convert image saturation. A value of 0% indicates complete unsaturated, while a value of 100% indicates no change in the image. The other values are linear multipliers of the effect. More than 100% has higher saturation. If no value is set, the default value is 1.
.img1 {
margin-left: 50px;
filter: saturate(10%);
}
.img2 {
margin-left: 50px;
filter: saturate(50%);
}
.img3 {
margin-left: 50px;
filter: saturate(100%);
}
.img4 {
margin-left: 50px;
filter: saturate(150%);
}
Copy the code
Sepia (%) converts to dark brown
Convert the image to dark brown. Value defines the scale of the conversion. A value of 100% is completely dark brown and a value of 0% has no change in the image. Values between 0% and 100% are linear multipliers of the effect. If this parameter is not set, the default value is 0.
.img1 {
margin-left: 50px;
filter: sepia(10%);
}
.img2 {
margin-left: 50px;
filter: sepia(50%);
}
.img3 {
margin-left: 50px;
filter: sepia(1);
}
.img4 {
margin-left: 50px;
filter: sepia(2);
}
Copy the code
Url () gets the URI pointing to the SVG filter
This file sets an SVG filter and can contain an anchor point to specify a specific filter element.
<! DOCTYPEhtml>
<html lang="en">
<style></style>
<body>
<svg width="230" height="120" xmlns="http://www.w3.org/2000/svg">
<filter id="blurMe">
<feGaussianBlur stdDeviation="5" />
</filter>
<circle cx="60" cy="60" r="50" fill="green" />
<circle cx="170" cy="60" r="50" fill="green" filter="url(#blurMe)" />
</svg>
</body>
</html>
Copy the code
Composite using
Multiple filter styles can be set for an element at the same time.
.img1 {
margin-left: 50px;
filter: sepia(10%) opacity(10%);
}
.img2 {
margin-left: 50px;
filter: sepia(50%) opacity(30%);
}
.img3 {
margin-left: 50px;
filter: sepia(1) opacity(50%);
}
.img4 {
margin-left: 50px;
filter: sepia(2) opacity(100%);
}
Copy the code
Commonly used way
The background of fuzzy
<! DOCTYPEhtml>
<html lang="en">
<style>
.home {
width: 500px;
height: 300px;
margin: 20px auto;
position: relative;
}
.home:after {
content: ' ';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-image: url(./4.jpg);
background-size: 100% 100%;
filter: blur(5px);
z-index: 2;
}
.div {
font-size: 40px;
background-color: bisque;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
text-align: center;
z-index: 3;
}
</style>
<body>
<div class="home">
<div class="div">The background of fuzzy</div>
</div>
</body>
</html>
Copy the code
- If set directly to the parent element
filter: blur(5px);Child elements will also be in blur. This is done by setting the pseudo classThe filter attributeAnd then overlays the pseudo-class on the original background. This allows only the background to be blurred.
Local clarity of background
<! DOCTYPEhtml>
<html lang="en">
<style>
.home {
width: 500px;
height: 500px;
background: url(./4.jpg) no-repeat fixed;
position: relative;
}
.home:after {
content: ' ';
width: 500px;
height: 500px;
position: absolute;
left: 0;
top: 0;
background: inherit;
filter: blur(5px);
z-index: 1;
}
.div {
position: absolute;
left: 35%;
top: 35%;
width: 200px;
height: 100px;
text-align: center;
font-size: 40px;
background: inherit;
z-index: 3;
}
</style>
<body>
<div class="home">
<div class="div">Local clear</div>
</div>
</body>
</html>
Copy the code
- The blur effect is the same as the background blur. This is mainly about the background
backgroundaddedfixedPosition the image so that it is fixed. Change the position of the div to crop the image to show part of the content.