时间戳

首页 > 解决方案 > 如何将 SVG 文件添加到 html 或 CSS？

html - 如何将 SVG 文件添加到 html 或 CSS？

问题描述

正如你在这里看到的，我使用图像标签在我的 github 存储库中添加了一个 SVG，但是我看不到它，当我打开实时预览时，它只显示一个图像图标来代替我的实际徽标，我也尝试使用 CSS 添加文件，但它有同样的问题。

https://github.com/Alucard2169/Third.git这里是指向我的 GITHUB 存储库的链接，如您所见，我已将所有媒体文件放在媒体文件夹中。 

.main_heading::before {
  content: url(media/logo.svg);
  display: block;
}
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=default-width, initial-scale=1">
        <meta charset="UTF-8">
        <meta lang="en">
        <link href="style.css" rel="stylesheet">
    </head>
    
    <body>
        <header>
            <div class="logo">
                <img src="media/logo.svg">
            </div>
            <h1 class="main_heading">
                A history of everything you copy
            </h1>
            <article class="main_content">Clipbord allows you to track and organize everything you copy instantly access your clipboard on all your devices.</article>

            <bottoom class="ios">
                Download for iOS
            </bottoom>
            <bottom class="mac">
                Download for Mac
            </bottom>
        </header>
    </body>
</html>

标签： htmlcssfrontend

解决方案

在通过 .css 链接文件时url()，您必须提供./. 如下所示，但这仅适用于您的 html 文件位于媒体文件夹之外的情况。

.main_heading::before {
  content: url(./media/logo.svg); 
  display: block;
}

推荐阅读