使用CSS更改PNG图像的颜色

html-css024

使用CSS更改PNG图像的颜色,第1张

给定一个图像，如何使用CSS更改PNG图像的颜色？下面本篇文章就来给大家使用CSS更改PNG图像颜色的方法，希望对大家有所帮助。 在CSS中使用Filter属性，利用滤镜功能来更改png图像颜色；CSS的Filter属性主要用于设置图像的视觉效果。 Filter属性存在许多属性值：示例1： 使用灰度滤镜将彩色图像更改为灰度图像 输出： 原始图像： 应用过滤器后：示例2： 此示例对图像使用许多过滤器。 效果图： 更多 web前端 知识，请查阅 HTML中文网 ！！

CSS滤镜（filter）属提供的图形特效，像模糊，锐化或元素变色。过滤器通常被用于调整图片，背景和边界的渲染。 MDN

CSS标准里包含了一些已实现预定义效果的函数。

filter: none

| blur()

| brightness()

| contrast()

| drop-shadow()

| grayscale()

| hue-rotate()

| invert()

| opacity()

| saturate()

| sepia()

| url()

具体请看原文

————————————————

版权声明：本文为CSDN博主「nanhupatar」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/nanhupatar/article/details/82793637

repeat-x

scroll

0

95px

transparent

repeat-x的意思是，这个背景图片在x轴上重复，这也就是为什么你看到一个竖着的小图片为什么会横着的了，因为它在横轴的方向不断重复了

0

95px的意思是，这个背景图片的位置是距离左边的距离为0像素，距离上面的距离为95像素，所以你会发现这个背景图片距离元素的顶部还有一段距离

transparent的意思是，这个元素的背景颜色是透明的，其实这一个transparent加不加都没关系，不过为了防止网页其他CSS可能会定义一些背景颜色的样式，干扰到了这个元素罢了。

对了,我还漏掉了一个scroll,这个样式加不加都没关系的,默认的属性就是scroll,它表示这个背景会随着滚动条的滚动而滚动。