通过CSS改变PNG图像的颜色?

给定一个透明的PNG显示一个简单的形状在白色，它是有可能以某种方式改变这通过CSS的颜色?某种叠加还是什么?

当前回答

当将一张图片从黑到白，或从白到黑时，色调旋转滤镜不起作用，因为黑色和白色在技术上不是颜色。相反，黑白颜色的变化(从黑到白或反之)必须使用invert filter属性来完成。

.img1 { 过滤器:反转(100%); ｝

2020-04-26 00:24:09

其他回答

是的:)

Surfin' Safari - Blog Archive » CSS Masks WebKit now supports alpha masks in CSS. Masks allow you to overlay the content of a box with a pattern that can be used to knock out portions of that box in the final display. In other words, you can clip to complex shapes based off the alpha of an image. [...] We have introduced new properties to provide Web designers with a lot of control over these masks and how they are applied. The new properties are analogous to the background and border-image properties that already exist. -webkit-mask (background) -webkit-mask-attachment (background-attachment) -webkit-mask-clip (background-clip) -webkit-mask-origin (background-origin) -webkit-mask-image (background-image) -webkit-mask-repeat (background-repeat) -webkit-mask-composite (background-composite) -webkit-mask-box-image (border-image)

2011-09-14 11:58:03

img标签有一个和其他标签一样的background属性。如果你有一个透明形状的白色PNG，就像一个模板，那么你可以这样做:

<img src= 'stencil.png' style= 'background-color: red'>

2011-09-14 11:58:07

为了字面上改变颜色，你可以使用-webkit-filter来合并CSS转换，当有事情发生时，你可以调用你选择的-webkit-filter。例如:

img {
    -webkit-filter:grayscale(0%);
    transition: -webkit-filter .3s linear;
    }
img:hover 
    {
    -webkit-filter:grayscale(75%);
    }

2015-06-03 20:15:52

body{ background: #333 url(/images/classy_fabric.png); width: 430px; margin: 0 auto; padding: 30px; } .preview{ background: #ccc; width: 415px; height: 430px; border: solid 10px #fff; } input[type='radio'] { -webkit-appearance: none; -moz-appearance: none; width: 25px; height: 25px; margin: 5px 0 5px 5px; background-size: 225px 70px; position: relative; float: left; display: inline; top: 0; border-radius: 3px; z-index: 99999; cursor: pointer; box-shadow: 1px 1px 1px #000; } input[type='radio']:hover{ -webkit-filter: opacity(.4); filter: opacity(.4); } .red{ background: red; } .red:checked{ background: linear-gradient(brown, red) } .green{ background: green; } .green:checked{ background: linear-gradient(green, lime); } .yellow{ background: yellow; } .yellow:checked{ background: linear-gradient(orange, yellow); } .purple{ background: purple; } .pink{ background: pink; } .purple:checked{ background: linear-gradient(purple, violet); } .red:checked ~ img{ -webkit-filter: opacity(.5) drop-shadow(0 0 0 red); filter: opacity(.5) drop-shadow(0 0 0 red); } .green:checked ~ img{ -webkit-filter: opacity(.5) drop-shadow(0 0 0 green); filter: opacity(.5) drop-shadow(0 0 0 green); } .yellow:checked ~ img{ -webkit-filter: opacity(.5) drop-shadow(0 0 0 yellow); filter: opacity(.5) drop-shadow(0 0 0 yellow); } .purple:checked ~ img{ -webkit-filter: opacity(.5) drop-shadow(0 0 0 purple); filter: opacity(.5) drop-shadow(0 0 0 purple); } .pink:checked ~ img{ -webkit-filter: opacity(.5) drop-shadow(0 0 0 pink); filter: opacity(.5) drop-shadow(0 0 0 pink); } img{ width: 394px; height: 375px; position: relative; } .label{ width: 150px; height: 75px; position: absolute; top: 170px; margin-left: 130px; } ::selection{ background: #000; } <div class="preview"> <input class='red' name='color' type='radio' /> <input class='green' name='color' type='radio' /> <input class='pink' name='color' type='radio' /> <input checked class='yellow' name='color' type='radio' /> <input class='purple' name='color' type='radio' /> <img src="https://i.stack.imgur.com/bd7VJ.png"/> </div>

来源:https://codepen.io/taryaoui/pen/EKkcu

2019-09-13 14:57:23

你可能想看看图标字体。http://css-tricks.com/examples/IconFont/

编辑:我在我的最新项目中使用字体- awesome。你甚至可以引导它。简单地把这个放在你的<head>:

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">

<!-- And if you want to support IE7, add this aswell -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css" rel="stylesheet">

然后继续添加一些像这样的图标链接:

<a class="icon-thumbs-up"></a>

这里是完整的小抄

——编辑

Font-Awesome在新版本中使用了不同的类名，可能是因为这使得CSS文件大大变小，并避免了模棱两可的CSS类。所以现在你应该使用:

<a class="fa fa-thumbs-up"></a>

编辑2:

刚刚发现github也使用自己的图标字体:Octicons 它可以免费下载。他们还提供了一些关于如何创建自己的图标字体的技巧。

2012-11-13 08:15:24

通过CSS改变PNG图像的颜色?

推荐文章

最新文章

标签