Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.