如何在background-image中使用svg如何改变颜色

结论

在我多番测试之后,才发现background-image使用svg,改变颜色根本做不了。

分析

当svg图片被使用成background-image,颜色的设置需要在svg内部才能生效。在外部CSS设置颜色样式,却是无效,这其实可以从CSS选择器得到解释,CSS选择器必须选择到DOM元素,而svg却被做成背景图,并没有以元素引入,所以在外部也就设不了颜色。

例子

CSS:

i {    display: inline-block;    width: 100px;    height: 100px;}.icon-del{    background-image: url(delete.svg);}.st0{fill:#EC665E;}.st1{fill:#FFFFFF;}

HTML:

SVG:

删除群成员Created with Sketch.                                                                                                                                                                                                                                                                                                                                                                                                                                              

以上就是如何在background-image中使用svg如何改变颜色 的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1545000.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 16:29:02
下一篇 2025年12月21日 16:29:25

相关推荐

  • CSS 渐变动画属性:transition 和 background-image

    CSS 渐变动画属性:transition 和 background-image 在网页设计中,动画效果能够为页面增添活力和吸引力。CSS提供了许多用于制作动画效果的属性,其中包括了渐变动画属性transition和background-image。本文将详细介绍这两个属性,并给出具体的代码示例。 …

    2025年12月24日
    000
  • CSS 图片过渡属性详解:transition 和 background-image

    CSS 图片过渡属性详解:transition 和 background-image 引言:在现代网页设计中,过渡效果是提升用户交互体验的重要技术。其中,图片过渡效果在美化网页、改善用户体验方面发挥了重要作用。本文将详细介绍两种常用的图片过渡属性:transition 和 background-im…

    2025年12月24日
    000
  • CSS 背景属性:background-image 和 background-color 的妙用

    CSS 背景属性:background-image 和 background-color 的妙用 背景是网页设计中非常重要的一部分,可以通过设置背景图像和颜色来增强页面的视觉效果,并提升用户体验。在 CSS 中,我们可以使用 background-image 属性来设置背景图像,使用 backgro…

    2025年12月24日
    000
  • 纯CSS3怎么给文本添加背景图

    在之前的文章《手把手教你使用css3实现按钮悬停闪烁动态特效》中,我们介绍使用css3给按钮添加动态效果,实现一个按钮悬停闪亮阴影动画效果的方法,感兴趣的朋友可以去了解一下~ 今天我们我们来看看使用CSS3怎么给文本添加背景图,让文字变得生动好看!在我们想要创建一个较大的文本标题,但不想使用普通又枯…

    2025年12月24日 好文分享
    000
  • css 多种背景的使用场景和技巧以及好处

    【推荐教程:CSS视频教程 】 CSS background是最常用的CSS属性之一。然而,并不是所有开发人员都知道使用多种背景。这段时间都在关注使用多种背景场景。在本文中,会详细介绍background-image`属性,并结合图形来解释多个背景使用方式以及其实际好处。 如果你还了解 CSS ba…

    2025年12月24日 好文分享
    000
  • 7个实用的CSS background-image小技巧

    (推荐教程:CSS教程) background-image可能是我们所有人(前端开发人员)在我们的职业生涯中至少使用过几次的CSS属性之一。大多数人认为背景图像没有什么不寻常的,但经过研究,答案并非如此。 所以本文收集了7个我认为最有用的技巧,并创建了一些代码示例,你可以在其中查看正在发生的事情。 …

    2025年12月24日 好文分享
    000
  • 如何使用纯CSS 实现一个没有DOM元素的动画效果

    本篇文章给大家带来的内容是关于如何使用纯css 实现一个没有dom元素的动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 代码解读 没有 dom 元素,直接写 css。设置页面空间: body { position: fixed; margin: 0; width:…

    2025年12月24日
    000
  • CSS怪异盒模型和标准盒模型如何使用

    这次给大家带来CSS怪异盒模型和标准盒模型如何使用,使用CSS怪异盒模型和标准盒模型的注意事项有哪些,下面就是实战案例,一起来看一下。 在html文档中,每个渲染在页面中的标签都是一个个盒子模型。 盒子模型又分为 : W3C标准的盒子模型 和 IE标准的盒子模型。 由于目前大部分主流的浏览器支持的是…

    2025年12月24日 好文分享
    000
  • css的渐变颜色

    这次给大家带来css的渐变颜色,使用css渐变颜色的注意事项有哪些,下面就是实战案例,一起来看一下。 background: -o-linear-gradient(left, #109afd, #3ed3fe);background: -moz-linear-gradient(left, #109a…

    好文分享 2025年12月24日
    000
  • 如何将HTML元素的值相加?

    本文将教你如何在HTML中添加元素的值。我们对HTML中的value属性以及使用value属性的情况有一个基本的了解。让我们期待对HTML value属性有更好的理解。 在 HTML 中,value 属性用于描述与其一起使用的元素的值。对于各种 HTML 组件来说,它具有不同的含义。用法- 它可以与…

    2025年12月21日
    000
  • html如何布局

    本篇文章主要介绍html如何布局 ,感兴趣的朋友参考下,希望对大家有所帮助。 p布局 body{margin: 0; padding: 0;}#header{width:100%; height: 90px; background: #b19f9d; }#nav{margin: 0 auto; wi…

    好文分享 2025年12月21日
    000
  • 10进制数如何转为16进制

    这次给大家带来10进制数如何转为16进制,10进制数转为16进制的注意事项有哪些,下面就是实战案例,一起来看一下。 问题 输入一个10进制数,输出这个10进制数对应的16进制数 思路 首先用10进制数除以16,余数则为不能进位的数字,则写在最低位上,商的含义是有多少个16,如果商大于等于16的话,意…

    好文分享 2025年12月21日
    000
  • 在HTML中各类型盒子的基线应如何确定

    这次给大家带来在html中各类型盒子的基线应如何确定,在html中各类型盒子的基线确定的注意事项有哪些,下面就是实战案例,一起来看一下。 确定盒子的基线的规则 1.1    确定inline-block的基线 The baseline of an ‘inline-block’…

    好文分享 2025年12月21日
    000
  • base标签需要如何使用

    这次给大家带来base标签需要如何使用,base标签使用的注意事项有哪些,下面就是实战案例,一起来看一下。 标签为页面上的所有链接规定默认地址或默认目标。通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。使用 标签可以改变这一点。浏览器随后将不再使用当前文档的 …

    好文分享 2025年12月21日
    000
  • html area图片热点如何使用

    这次给大家带来html area图片热点如何使用,使用html area图片热点的注意事项有哪些,下面就是实战案例,一起来看一下。 标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面。其基本语法结构如下:…

    好文分享 2025年12月21日
    000
  • 在HTML里的hr水平线应该如何使用

    这次给大家带来在html里的hr水平线应该如何使用,在html里的hr水平线使用的注意事项有哪些,下面就是实战案例,一起来看一下。 代码如下: 相信看了这些案例你已经掌握了方法,更多精彩请关注创想鸟其它相关文章! 相关阅读: 怎样通过disabled和readonly将input设置为只读效果 立即…

    好文分享 2025年12月21日
    000
  • 单选和多选按钮如何给图片加样式

    这次给大家带来单选和多选按钮如何给图片加样式,单选和多选按钮给图片加样式的注意事项有哪些,下面就是实战案例,一起来看一下。 之前一直看到有人在问,单选按钮和多选按钮怎么加样式、怎么把按钮变大?下面把我做的一个例子分享出来 代码如下: $(function(){ $(“input[type=’chec…

    好文分享 2025年12月21日
    000
  • HTML中head头结构应该如何使用

    这次给大家带来html中head头结构应该如何使用,使用html中head头结构的注意事项有哪些,下面就是实战案例,一起来看一下。 下面介绍下常用的head头部结构,以及对各个标签、元素的意义以及使用场景一一介绍(本篇以一丝大神的文章为基础,进行扩展总结)。  padding.me的head头结构 …

    好文分享 2025年12月21日
    000
  • 使用HTML应该如何编写邮件模版

    这次给大家带来使用html应该如何编写邮件模版,使用html编写邮件模版的注意事项有哪些,下面就是实战案例,一起来看一下。 今天,我想写一个”低技术”问题。   话说我订阅了不少了新闻邮件(Newsletter),比如JavaScript Weekly。每周收到一封邮件,了解…

    好文分享 2025年12月21日
    000
  • HTML 5之新增的特性该如何使用

    这次给大家带来html 5之新增的特性该如何使用,html 5之新增的特性使用的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 众所周知HTML5 属于万维网联盟 (W3C), 这个组织为整个网络界提供了标准,如此形成的协议可在全世界通行。在 2016 年 11 月, W3C 对长期行使的 …

    好文分享 2025年12月21日
    000

发表回复

登录后才能评论
关注微信