it-roy-ru.com

SVG фоновое изображение не отображается

Я поместил зеленое изображение PNG в качестве фона для div, и это выглядит так:

 enter image description here

Я использовал CSS-хак, чтобы сохранить текст внутри зеленого фона. Так что это мой HTML для этого раздела:

<section id="aboutprocess">
        <div class="container">
            <div class="row">
                <div class="col-md-8 ">
                    <p class="text-center">Our agile team continuously delivers working software and empowers your organization to embrace changing requirements.
                    </p>
                    <button type="button" class="btn btn-link center-block white" role="link" type="submit" name="op" value="Link 2">about our process</button>
                </div>
                <!--end col-md-8 col-md-offset-2-->
            </div>
            <!--end row -->
        </div>
        <!--end container-->
    </section>
    <!--end aboutprocess-->

И это CSS:

#aboutprocess {
        background: url("../img/tech_bg.png") no-repeat left top;
        width: 100%;
        background-size: cover;
            }

    #aboutprocess .container {
        padding-top: 32.6316%;
        position: relative;
    }

    #aboutprocess .row {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    #aboutprocess p {
        color: #ffffff;
        text-align: center;
    }

Теперь я хочу заменить png на файл svg, и единственное, что я изменил в CSS, - это расширение файла:

#aboutprocess {
        background: url("../img/tech_bg.svg") no-repeat left top;
        width: 100%;
        background-size: cover;
            }

Но когда я просматриваю это в браузере, я больше не вижу фон:

 enter image description here

Что я делаю неправильно? Вы можете увидеть демонстрационную страницу с фоновым изображением png здесь .

Спасибо за помощь.

EDIT: Здесь'а ссылка Dropbox на файл SVG.

6
bijoume

Вы, вероятно, уже сделали, но я предлагаю абсолютно уверенно убедиться, что tech_bg.svg находится в каталоге, в котором он должен быть (папка img), и что он написан точно так же, как в текстовом редакторе, включая чувствительность к регистру имени файла и расширение файла. GitHub определенно воспринимает расширение чувствительности буквально, и у меня были проблемы с загрузкой файлов SVG по той же причине (.svg против .SVG).

Это было решение для OP, подробности см. В комментариях:Следующий вопрос, который я задам, - как вы создали SVG? Какое программное обеспечение вы использовали, и вы уверены, что сгенерировали его правильно в Illustrator? Есть довольно специфический способ сделать это.

Единственное, что пришло в голову, это увеличение z-index из #aboutprocess, особенно если ваш текст действительно исчез (я предполагаю, что он все еще там, только белый, но попробуйте выделить его, чтобы убедиться). Поиграйте с другими значениями CSS, такими как no-repeat, left, top и т.д.

Попробуйте очистить кэш браузера и обновить его один раз, а также попробуйте другие браузеры. Кроме того, если случайно вы используете IE8 и ниже или Android 2.3 и ниже, это определенно будет причиной. 

На этот вопрос сложно ответить однозначно, поскольку мы не сможем протестировать его с вами на вашем локальном компьютере, где происходит несоответствие.

1
Kyle Vassella

Я знаю, что этот вопрос старый и решен, но если у кого-то еще есть эта конкретная проблема (и этот вопрос хорошо размещен в Google): браузеры НЕ будут отображать svg, если веб-сервер передает его с неправильным заголовком «content-type» . Если ваш веб-сервис возвращает «application/octet-stream» или «text/xml», изображение не будет работать должным образом, несмотря на то, что оно было передано правильно и сам файл SVG в порядке.

Правильный медиатип для SVG: image/svg+xml

2
Felype

Иногда проблема не всегда исходила от css. Попробуйте добавить следующую строку в ваш .htaccess , чтобы сервер мог распознавать SVG-файлы из вашего CSS-файла (background: url ("../ img/tech_bg.svg") без повтора) слева сверху;), вставьте эту строку:

RewriteRule !\.(js|ico|gif|jpg|jpeg|svg|bmp|png|css|pdf|swf|mp3|mp4|3gp|flv|avi|rm|mpeg|wmv|xml|doc|docx|xls|xlsx|csv|ppt|pptx|Zip|rar|mov)$ index.php

Не нужно иметь столько правил, как указано выше, но это зависит от того, что вам нужно для формата, который вы хотели бы иметь на своем сайте, но для вашего текущего вопроса здесь, пожалуйста, убедитесь, что в правиле есть " svg " ваш файл .htaccess.

Это работает, попробуйте! :)

1
Raymond
.pic {
    width: 20px;
    height: 20px;
    background-image: url("../img/tech_bg.svg");
    }

не забывайте точки и/---> ../не фон ---> background-image: и не забывайте очистить историю браузера и деньги

<div class="pic"></div>
0
kamran abbasov