Home / Questions / 201187
Accepted
Caldeiro
Asked: 2020-10-03 02:39:00 +0800 CST 2020-10-03 02:39:00 +0800 CST

通过 CSS 添加 svg 图像

  • 772

正如标题所说，我需要将 svg 图像添加到 div 的背景中。我必须通过 css 是或是添加图像。

css

.catalogo-gallery .btn-pdf
{
   font-size: 17px;
   font-weight: 800;
   font-family: "Open Sans";
   background-color: rgb(255, 255, 255);
   border-style: solid;
   border-width: 2px;
   padding: 12px 50px;
   text-decoration: none;
   background-image: url("image.svg");
   width:100%;
   height: 100%;
}

html

 <div class="div-btn" >
   <a style="color:'.$color.'; border-color:'.$color.';" class="btn-pdf" href="'.$tipo_catalogo["pdf"]["url"].'">DESCARGAR</a>
</div>
css

3 Answers

  1. 我明白了：

    .catalogo-gallery .btn-pdf
{
   font-size: 17px;
   font-weight: 800;
   font-family: "Open Sans";
   background-color: rgb(255, 255, 255);
   border-style: solid;
   border-width: 2px;
   padding: 12px 40px;
   text-decoration: none;
   background-image: url("https://image.flaticon.com/icons/svg/337/337946.svg");
   background-size: 30px;
   background-position: 0 8px;
   background-repeat: no-repeat;
   width:100%;
   height: 100%;
}
    <div class="catalogo-gallery">
  <a href="#" class="btn-pdf">Descargar PDF</a>
</div>

    不会是图片相对路径的问题吧？也许您应该尝试将绝对路径放在您的域中。

    • 2

  2. 一方面：您可以在 wordpress 主题的 functions.php 中添加声明，以允许您将 svg 上传到媒体：

    /*************************************************************************************************************************************
    Funcionalidad del tema > Añadir svg a media upload
*************************************************************************************************************************************/

function svg_myme_types($mime_types){
    $mime_types['svg'] = 'image/svg+xml'; //Adding svg extension
    return $mime_types;
}
add_filter('upload_mimes', 'svg_myme_types', 1, 1);

    除此之外，您可以将图像放在主题或子主题内的图像文件夹中，这是 css 将从中查找它们的位置（无需添加比文件夹名称更多的路径）。

    在这种情况下：

    background-image: url("images/image.svg");
    • 1
  3. Best Answer

    另一种选择是使用 svg 作为数据 uri：

    .catalogo-gallery .btn-pdf
{
   font-size: 17px;
   font-weight: 800;
   font-family: "Open Sans"; 
   border-style: solid;
   border-width: 2px;
   padding: 12px 40px;
   text-decoration: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' %3E%3Ccircle r='50' cx='50' cy='50' fill='tomato'/%3E%3Ccircle r='41' cx='47' cy='50' fill='orange'/%3E%3Ccircle r='33' cx='48' cy='53' fill='gold'/%3E%3Ccircle r='25' cx='49' cy='51' fill='yellowgreen'/%3E%3Ccircle r='17' cx='52' cy='50' fill='lightseagreen'/%3E%3Ccircle r='9' cx='55' cy='48' fill='teal'/%3E%3C/svg%3E");
   background-size: 30px;
   background-position: 2px 8px;
   background-repeat: no-repeat;
   width:100%;
   height: 100%;
}
    <div class="catalogo-gallery">
  <a href="#" class="btn-pdf">Descargar PDF</a>
</div>

    阅读有关SVG 作为数据的更多信息：uri

    • 1