SVG作为背景图像

弗雷德马特

我正在从Illustrator中将向量(徽标)导出为SVG(1.1)。该向量没有渐变或透明性。

当我在CSS中使用SVG作为背景图像时,没有显示任何内容,但是当我访问图像链接(http://www.something.com/logo.svg)时,它完美地显示了该图像。

CSS

#site-header {
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
    height: 62px;
    top: 0;
    left: 0;
    position: fixed;
    z-index: 2000;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    overflow: hidden;
    background-color: #758391;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
    -webkit-box-shadow: 0 0 2px rgba(6, 8, 8, 0.15);
    box-shadow: 0 0 2px rgba(6, 8, 8, 0.15);
}

#site-header #logo {
    display: inline-block;
    float: none;
    width: 10%;
    min-width: 48px;
    height: 100%;
    max-height: 40px;
    margin: 12px 0;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#site-header #logo a {
    width: 100%;
    height: 100%;
    display: block;
    background: rgba(0, 0, 0, 0) url("img/logo.svg") no-repeat center center;
}

的HTML

<header id="site-header">
    <hgroup id="logo">
        <a href="#">
            <h1>
                <span class="hide">some hidden content</span>
            </h1>
        </a>
    </hgroup>
</header>

顺便说一句,当我尝试在img元素中使用svg时,它不起作用。

知道为什么在用作CSS背景时为什么不显示我的SVG吗?

谢谢

弗雷德马特

好的,我发现了问题。这与服务器有关,我只是在.htaccess中添加了SVG支持

AddType image/svg+xml svg
AddType image/svg+xml svgz

谢谢

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

SVG作为背景图像

来自分类Dev

SVG条纹图案作为元素背景图像

来自分类Dev

Polymer SVG作为CSS背景图像不起作用

来自分类Dev

如何获得内联SVG代码作为背景图像?

来自分类Dev

带有掩码的SVG作为HTML元素的背景图像

来自分类Dev

SVG条纹图案作为元素背景图像

来自分类Dev

Polymer SVG作为CSS背景图像不起作用

来自分类Dev

在SVG中使用WebP作为背景图像

来自分类Dev

Base64 编码的 SVG 图像作为背景图像 CSS 属性

来自分类Dev

SVG作为Div的嵌入式背景图像不起作用

来自分类Dev

是否可以在style.css中内联SVG作为背景图像进行多次重用?

来自分类Dev

使用SVG作为背景图像时,未渲染嵌入式<image>

来自分类Dev

使用img src作为背景图像

来自分类Dev

重复形状作为背景图像

来自分类Dev

使CSS背景图像(SVG)响应

来自分类Dev

图像作为svg路径的背景

来自分类Dev

从图像对象输出图像URL作为背景图像

来自分类Dev

Google Map静态图像API作为背景图像吗?

来自分类Dev

响应英雄图像作为CSS背景图像?

来自分类Dev

Turbolinks将载波图像作为CSS背景图像

来自分类Dev

引用PrimeFaces图像资源作为CSS背景图像URL

来自分类Dev

响应英雄图像作为CSS背景图像?

来自分类Dev

更改通过背景图像加载的SVG图像的填充颜色

来自分类Dev

svg作为背景图像,带有遮罩可更改颜色,带有阴影可显示阴影

来自分类Dev

以编程方式添加CSS渐变作为背景图像

来自分类Dev

使用SKSPriteNode作为背景图像时FPS低

来自分类Dev

如何让用户选择文件作为背景图像?

来自分类Dev

如何使用CSS将文本颜色作为背景图像?

来自分类Dev

插入javascript变量作为背景图像源

Related 相关文章

热门标签

归档