如何在 :before 伪类中设置 SVG 图像的大小?

2024-02-17

我想在 CSS 中显示图像:before元素。

.withimage:before {
  content: url(path/to/image.svg);
  display: block;
  height: 20px;
  width: 20px;
}

问题是,height and width应用于元素,但 SVG 不会缩小。如何将尺寸应用于之前创建的实际元素?

示例:https://plnkr.co/edit/UgryaObojs6PCU579oGY https://plnkr.co/edit/UgryaObojs6PCU579oGY


您可以使用 svg 作为背景图像:

.withimage:before {
  content: "";
  display:block;
  height:125px;
  width:125px;
  background-size: 125px 125px;
  background-image: url(test.svg);
  background-repeat: no-repeat;
}

Here is example https://plnkr.co/edit/RCuUeONrKoVo4qOvBDk1?p=preview

您也可以尝试使用这个:

.withimage:before {
  content: url("data:image/svg+xml; utf8, <svg.. code here</svg>");
    display:block;
    height:20px;
    width:20px;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 :before 伪类中设置 SVG 图像的大小? 的相关文章

  • a:悬停颜色不起作用

    一件很奇怪的事情 我想在悬停时更改链接的文本颜色和背景颜色 这是代码 css link menu a color white display block height 100 width 100 text decoration none t
  • JavaFX使节点覆盖父节点边框颜色

    我有一个如下所示的节点 仅使用 css 我希望标签覆盖其父边框颜色 因此标签下方的边框颜色部分变得不可见 我用来制作这个边框的CSS代码 fx border color black fx border width 3 fx border r
  • 不要包裹 span 元素

    我有一份清单 span 可以在 a 内左右移动的元素 div 元素 如果某些跨度超出了 div 它们应该被隐藏 这可以很好地使用overflow hidden 但是 如果跨度超出了 div 的容纳范围 跨度就会换行 这对于我的用例来说是不期
  • 网格布局:创建 CSS,以便元素在调整相邻元素大小时保持位置

    我想在网格布局中构建一个简单的图像库 并且我正在使用类似的东西悬停时缩放 http www javascript fx com navigation imagezoom general help help html缩放悬停图像 但我宁愿使用
  • 中有样式表 吗?

    在内部链接 CSS 文件是一个坏主意吗 body 我读过 如果浏览器在外部找到另一个 CSS 文件 则它会被迫重新开始 CSS 渲染 head 只是因为它可能需要将样式应用于已经渲染的元素 另外 我认为 HTML 无法正确验证 我需要确认这
  • 在javascript中创建图像的缩略图方块(不丢失纵横比)

    我正在制作一个客户端拖放文件上传脚本作为书签 在上传之前 我使用 File API 将图像读取为 base64 格式并将其显示为缩略图 This is how my thumbnails look like I want them to l
  • 使圆圈与 d3.js 上的多线匹配相同的颜色过滤?

    我有一个多线图 当按每种水果过滤时会更新 每条线条颜色对应不同的销售年份 在 的帮助下Shashank https stackoverflow com users 5569282 shashank 每个数据点线上的圆圈已添加到组中 而不是直
  • 水平和垂直居中 div 位于页面中间,页眉和页脚粘在页面顶部和底部

    我正在尝试制作一个具有固定高度页眉和页脚的页面 页眉位于屏幕顶部 100 宽度 页脚位于底部 100 宽度 我想将一个具有可变高度内容的 div 居中放置在页眉和页脚之间的空间中 在下面的 jsfiddle 中 如果内容比空格短 它会起作用
  • 海量矢量资源导入Android Studio

    有没有办法将许多矢量 svg 图像导入到项目中 导入 30 多个图标有点无聊而且相当愚蠢 Android Studio 使用哪个脚本来转换 svgs 现在 Android Studio 中可以实现这一点 在左侧的资源管理器中 效果很好
  • 动态突出显示时向

    添加项目符号点?

    Update 例子 p Text Text p 在示例中 是否可以选择第二个 文本 单词 p 元素并单击按钮仅动态添加项目符号点到选定的 单词 有没有可能 在一个 p p Text p 突出显示从 p 元素并添加项目符号点到按钮上动态单击的
  • 我正在尝试向我的 vue.js 项目添加背景图像

    我想添加覆盖整个页面的背景图像 然而现在看起来是这样的 我希望它跨越整个网页 在 vue js 中这将如何完成 我还想要一个动画工具栏 以便当页面不滚动时工具栏是透明的并呈现背景图像的外观 当它滚动时 工具栏将具有当前的蓝色 这是我的小提琴
  • 如何删除flexbox中所有换行行的左右边距(没有nth-child或js)

    我正在寻找一种好方法来删除每行中每个第一个和最后一个项目的左右边距 而不使用 nth child 或 JavaScript 如果这是不可能的 那么我想下一个最好的方法是在主弹性盒元素上设置负左 右边距 但我不太确定使用弹性盒来做到这一点的最
  • 样式标签中的源映射是否有效?

    我在标签和源映射中遇到 CSS 问题 为了缩短项目的加载时间 我改变了将 CSS 放入 HTML 的方式 将其改为 h1 Source maps working wonderfully h1 进入这个
  • 是否可以使用 Flying Saucer (XHTML-Renderer) 将 css 解析为类路径资源?

    我正在尝试将资源打包到 jar 中 但我无法让 Flying Saucer 在类路径上找到 css 我无法轻松构建 URL 来无缝解决此问题 https stackoverflow com questions 861500 url to l
  • 有没有办法将变量从 javascript 导入到 sass 或反之亦然?

    我正在制作一个依赖于块概念的 CSS 网格系统 所以我有一个基本文件 例如 max columns 4 block width 220px block height 150px block margin 10px 它被 mixin 使用 m
  • 扩展位置绝对div超出溢出隐藏div

    我已经好几个月没有做过CSS了 所以我可能会错过一些简单的东西 但无论解决方案是什么 我都无法弄清楚 所以问题就在这里 这是我的代码的简化版本 div style height 100 width 200px div style margi
  • 为什么将 x 和 y 设置为 0 时 svg 文本会消失?

    我刚刚开始阅读有关svg我提出了以下问题 我正在创建一个简单的svg with a text里面如下图所示 从我的阅读中我了解到x and y of the text标签声明文本在标签内的位置svg space 为什么当我同时设置x and
  • 引导行之间的垂直间距

    所以我正在研究布局 为了 响应能力 我决定使用 Bootstrap 现在我猜网格系统有问题 我想要的结果如下 1 4 2
  • HTML 元素的默认背景颜色是什么?白色还是透明?

    我只是被一个简单的问题困住了 想弄清楚 HTML 元素的默认背景颜色是什么 是白色的还是透明的 默认背景颜色是透明的 看这里 https developer mozilla org en docs Web CSS background co
  • 如何强制外部 div 扩展到内部 div 的高度?

    我有 ajax 到的数据 div class content 我希望外部 div 扩展到内部 div 的高度 我不知道该怎么做 HTML div class outer div class inner div class content S

随机推荐

  • Spring Security:不同路径的多个 OpenID Connect 客户端?

    使用 Spring Boot 2 1 5 和 Spring Security 5 我尝试使用两个不同的 OpenID 客户端 基于 Keycloak 这是我们所拥有的application properties spring securit
  • Vuejs 2:将事件从组件发送到父级

    我有这个代码 html div text div
  • Hibernate Sessionfactory 重启 |春天

    我的要求如下 我需要使用从外部获得的新 HBM 文件频繁地在 Spring Web 应用程序中重新启动 或重建 休眠会话工厂 目前我的 Sessionfactory 类如下 带有 SessionFactory 代理来拦截 OpenSessi
  • 如何针对多个和/或条件使用 Hibernate Criteria 对象

    我需要创建一个 Hibernate 标准限制来满足 3 个条件 问题是最后一个条件实际上是使用 AND 运算符的条件 我的第一个条件 Criterion startInRange Restrictions between expectedS
  • 从 Flutter 的 List 中删除索引式 CustomWidget

    我最初在列中的小部件列表为空 现在在 其他小部件 上单击 我正在在 contactItems 中添加新的自定义小部件 Column children contactItems List
  • Unity3D - 用于精灵裁剪的着色器

    我正在尝试创建一个可用于在游戏中剪辑 2D 精灵的着色器 我在中找到了该着色器另一个问题 https stackoverflow com questions 16397023 unity3d a shader that will clip
  • 如何将dcm4che库导入到java项目中?

    我正在尝试导入dcm4che库到我的java项目 因为我想实现一个非常简单的应用程序 它将能够使用这个库 https github com dcm4che dcm4che https github com dcm4che dcm4che 我
  • 为这个要求写一个skype插件

    我正在开始研究 Skype 编程 Skype 插件是否只有一种技术 或者是否有多种框架或 API 我想制作一个插件 让我的数据库中的用户可以通过 Skype 相互通信 视频 音频 聊天 而无需看到彼此真实的 Skype id 这可能吗 我想
  • C# 4.0 的新“命名参数”功能不应该称为“命名参数”吗?

    我想这种命名可能有历史原因 而且其他语言也有类似的功能 但在我看来 参数在 C 中总是有一个名称 参数是未命名的参数 或者选择这个术语有什么特殊原因吗 哦 你想要论点 抱歉 这是参数 参数是左边大厅里的两扇门
  • 如何检查 Eclipse 插件性能

    我是 Eclipse 插件开发新手 我一直在修改我们团队中使用的一个插件 我不想添加新的瓶颈 另外 我要集成的 Eclipse 需要太多时间来安装插件 关于如何确定其原因有什么建议吗 所以我想知道一些技巧 如何检查插件的性能 任何可用的工具
  • jQuery .html() 不复制文本区域或输入的内容

    我正在尝试使用复制元素的内容elem html 但它不包括的内容inputs or textareas 这是一个示例 尝试在框中写入 然后单击 复制 http jsfiddle net gAMmr 2 http jsfiddle net g
  • ElasticSearch 6,具有动态索引映射的 copy_to

    也许我错过了一些简单的事情 但仍然无法弄清楚以下事情 从 ES 6 x 开始 all字段已弃用 建议使用copy to操作说明 https www elastic co guide en elasticsearch reference cu
  • 将 ipython 笔记本转换为 mediawiki

    我想将 ipython 笔记本转换为 mediawiki 标记 我有两个想法如何做到这一点 自定义导出nbconvert tool 先导出为LaTeX 然后使用pandoc将其转换为 mediawiki 标记 我在第一个选项中找不到任何内容
  • 在动态创建的类中实例化 spring bean

    我正在动态创建包含 spring bean 的类 但是这些 bean 没有被实例化或初始化 将它们保留为空 如何确保动态创建的类正确创建其所有 spring bean 这就是我动态创建类的方式 Class ctransform try ct
  • 官方 FTDI android 驱动程序 read() 不起作用

    我使用的是官方驱动程序http www ftdichip com Android htm http www ftdichip com Android htm 03 20 13 37 52 359 警告 FTDI 4453 读取开始 03 2
  • Golang解析HTML,提取带有标签的所有内容

    正如标题所述 我需要返回 html 文档的 body 标记中的所有内容 包括任何后续的 html 标记等 我很好奇知道解决此问题的最佳方法是什么 我有一个使用 Gokogiri 包的工作解决方案 但是我试图远离任何依赖于 C 库的包 有没有
  • Django 1.9 JSONField 更新行为

    我最近更新到 Django 1 9 并尝试更新一些模型字段以使用内置 JSONField 我正在使用 PostgreSQL 9 4 5 当我尝试创建和更新对象的字段时 我遇到了一些奇怪的事情 这是我的模型 class Activity mo
  • Rails 4 多域应用程序,为每个域设置了语言环境 i18n 语言环境

    在 Rails 4 多域应用程序中 我需要为每个域提供 4 种语言的一组区域设置文件 总共 3 个域 有些翻译在领域之间重叠 但其中一些非常具体 所以我正在考虑一种类似于这样的结构 config locales en yml fr yml
  • Android Studio 4.1 在 Mac 中卡在加载屏幕

    从昨天开始 我的 Android Studio 就一直停留在加载屏幕上 X X 我尝试过的 正在重新启动计算机 清除垃圾文件和日志 完全卸载然后重新安装Android Studio 遵循许多不同的解决方案 例如 其中之一是here http
  • 如何在 :before 伪类中设置 SVG 图像的大小?

    我想在 CSS 中显示图像 before元素 withimage before content url path to image svg display block height 20px width 20px 问题是 height an