我有一张天蓝色星星的图像,我只想更改星星的颜色。
#estrella img{
height: 35px;
}
</html>
<head>
<title>Cambiar el color de la imagen</title>
</head>
<div id="estrella"><img src="http://i268.photobucket.com/albums/jj6/SK_CRISIS/Emblem%20BG%20PNGs/Star.png"></div>
</html>
我如何使用 css 规则进行此更改?
对于这样的东西,有SVG。
当您可以保存自己的 HTTP 请求并使其更易于维护时,使用外部图像是没有意义的。
标记:
我们首先使用标志定义我们的星星
<path>
:重要的是您
currentColor
在属性中使用 CSS 变量,fill
以便<path>
能够使用 CSS 中的属性更改图标的颜色color
。现在我们有了星号,我们将把它包裹在标记中
<symbol>
并给它一个id
,以便我们稍后可以使用它。您可以添加标题以帮助解决可访问性问题。(有关 viewBox 的信息在这里)接下来,如果我们想添加更多图标,我们将使精灵表用作容器。我们会给你一个
id
隐藏 CSS 中的元素,因为一些浏览器会显示不需要的空白。现在我们有了 SVG 标记,我们可以继续将它与标签一起使用,
<use>
如下所示:在这里,我们将给它一个通用的块级类和一个修饰符。在标签内部,
<use>
我们通过调用它来引用我们的符号id
。每次你想使用这个图标时,你只需粘贴这段代码。
风格:
还记得我们之前定义的类
<svg>
吗?这些将帮助我们设置元素的样式。
我们只是隐藏我们的精灵表。
准备好了!
代码片段:
更多关于这种技术的信息在这里。
当然,它可以通过在类上应用 filter 属性来对 png 图像进行,根据联盟的过滤器如何工作:“过滤器效果是一种图形操作,当它在文档中绘制时应用于元素。它是一种基于图像的效果,其中获取零个或多个输入图像,(应用)一组特定于效果的参数,然后输出(结果)图像。”
现在,我向您展示示例代码以作为指导:
事实上,它的作用是在 png 图像上应用阴影,通过不透明度为相关的 png 对象赋予透明度,以便它可以采用您分配的颜色,悬停时您只需将其更改为您想要的颜色,这是一个半解决方案,但仍然有效,希望对您有所帮助,如果您有疑问,请不要犹豫,问候。
在这个例子中你不能,因为它是一个 png!最简单的方法是使用 CSS/CSS3 创建星星
如果您不想浪费时间,您可以使用 FontAwesome 之类的字体让一切变得简单,然后您只需通过 css 更改颜色
http://fontawesome.io/icon/star/
您可以修改图像的滤镜和饱和度,例如: