How to modify the color of a picture with CSS
Editor to share with you how to use CSS to modify the color of the picture, I hope you have something to gain after reading this article, let's discuss it together!
The principle is actually very simple, what is used is the drop-shadow in the CSS3 filter filter, which can add projection to the non-transparent area of the picture. You can understand it as the following picture.
It looks like it makes the original object leave the page, and then displays a projection of that object on the page. It is a bit similar to box-shadow, but there is still a significant difference between the two. I will write a special article later to compare the difference between the two.
Let's take a look at the grammar first:
Filter:drop-shadow (shadow color cast by horizontal shadow offset distance vertical shadow offset distance)
We prepare a picture with a transparent background (picture size 40px X 40px)
Wrap the picture with a div and add to the picture
Filter: drop-shadow (40px 40px yellow)
This code means to project a shape that is the same as the picture.
The three parameters represent:
Move 40px horizontally to the right
Move 40px vertically down
The projected shape and color is yellow.
.box {
Width: 40px
Height: 40px
Border: 1px solid red
Margin: 200px auto
}
.pic {
Filter: drop-shadow (40px 40px yellow)
}
The effect is
Next, let's change the original code slightly, set the original image outside the div and hide it, and place the discolored projection in the div.
.box {
Width: 40px
Height: 40px
Border: 1px solid red
Margin: 200px auto
Text-indent:-40px
Overflow: hidden
}
.pic {
Filter: drop-shadow (40px 0px yellow)
}
After reading this article, I believe you have a certain understanding of "how to modify picture color with CSS". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!
