SVG в CSS-фонах не отображается в Safari

следующий код не работает в Safari, и изображение не отображается. Это происходит только в Safari, он работает во всех других браузерах, я не могу понять, почему. Вот код CSS:

.hero {
        background: url(images/cards.svg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        height:180px;
        width:100%;
        margin-bottom:20px;
    }

и HTML-код:

<div class="hero"></div>

Update: приведенный выше код работает при конвертации " карт.svg " в JPG, но я бы предпочел работать с SVG, поскольку они загружаются быстрее. Почему SVG не появляется в Safari (7.0.1)? Согласно http://caniuse.com, SVG as поддерживается фоновое изображение CSS, но оно не отображается.

9
css html safari svg

3 ответов

Это потому, что мой сервер обслуживает его с неправильным содержанием-типа.

пришлось добавить это к моему .файл htaccess:

AddType image/svg+xml .svg .svgz

это помогло мне:http://css-tricks.com/snippets/htaccess/serve-svg-correct-content-type/

11

я столкнулся с той же проблемой, хотя в моем случае проблема была не в типе контента. Оказалось, что мне пришлось добавить кавычки вокруг url, чтобы заставить его работать, т. е.:

background-image: url('/path/to/my.svg');

...не:

background-image: url(/path/to/my.svg);

Я знаю, что это не проблема, с которой столкнулась OP, но разместите это здесь в интересах всех, кто сталкивается с той же проблемой, что и я, и приходит к этой теме.

2

я исправил проблему, добавив следующий код .файл htaccess.

<ifModule mod_headers.c>
    <FilesMatch "\.(svg|svgz)$">
    Header set Content-Type "image/svg+xml"
    </FilesMatch>
</IfModule>

ссылки :

0