web-dev-qa-db-fra.com

Image d'arrière-plan SVG non affichée

J'ai placé une image png verte en tant qu'arrière-plan d'une div et cela ressemble à ceci:

 enter image description here

J'ai utilisé un hack CSS afin de conserver le texte à l'intérieur du fond vert. Voici donc mon code HTML pour cette section:

<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-->

Et voici le 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;
    }

Maintenant, je veux remplacer le png par le fichier svg et la seule chose que j'ai modifiée dans le CSS est l'extension du fichier:

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

Mais lorsque je prévisualise ceci dans le navigateur, je ne peux plus voir le fond:

 enter image description here

Qu'est-ce que je fais mal? Vous pouvez voir la page de démonstration avec l'image d'arrière-plan png ici .

Merci de votre aide.

EDIT: Here'a un lien Dropbox vers le fichier SVG.

htmlcsstwitter-bootstrapsvgbackground-image
6
bijoume

Vous l'avez probablement déjà fait, mais je suggère de vous assurer absolument que tech_bg.svg se trouve dans le répertoire qu'il est censé être (dossier img) et qu'il est orthographié exactement de la même manière que dans l'éditeur de texte, y compris la sensibilité à la casse du nom de fichier. et extension de fichier. GitHub prend certainement à la lettre la sensibilité à la casse et j'ai eu des problèmes pour télécharger des fichiers SVG pour la même raison (.svg vs .SVG).

C'était la solution pour OP, voir les commentaires pour plus de détails: La question suivante que je vais vous poser est la suivante: comment avez-vous créé le SVG? Quel logiciel avez-vous utilisé et êtes-vous sûr de l'avoir généré correctement dans Illustrator? Il y a une manière assez spécifique de le faire.

La seule autre chose qui me venait à l'esprit était d'augmenter le z-index de #aboutprocess, en particulier si votre texte avait vraiment disparu (je suppose qu'il est toujours là, juste en blanc, mais essayez de le surligner pour vous en assurer). Jouez avec les autres valeurs CSS proches telles que no-repeat, left, top, etc.

Essayez de vider le cache de votre navigateur et de l'actualiser une fois, et essayez également d'autres navigateurs. De plus, si par hasard vous utilisiez IE8 et versions antérieures ou Android 2.3 et versions antérieures, ce serait certainement la cause. 

C'est une question difficile à répondre définitivement car nous ne pouvons pas être là pour le tester avec vous sur votre machine locale, où l'incohérence se produit.

1
Kyle Vassella

Je sais que cette question est ancienne et résolue, mais que quelqu'un d'autre ait ce problème particulier (et que cette question est bien placée sur Google): les navigateurs n'affichent PAS svg si le serveur Web le transfère avec un en-tête incorrect "type de contenu". Si votre service Web renvoie "application/octet-stream" ou "text/xml", l'image ne fonctionnera pas correctement, bien qu'elle ait été transférée correctement et que le fichier SVG soit correct.

Le type de média correct pour SVG est image/svg+xml

2
Felype

Parfois, le problème ne vient pas toujours du fichier css. Essayez d’ajouter la ligne suivante à votre .htaccess , afin que le serveur puisse reconnaître les fichiers svg de votre fichier css ( background: url ("../ img/tech_bg.svg") no- répéter à gauche en haut; ), Insérer cette ligne:

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

Nul besoin d'avoir autant de règles que ci-dessus mais cela dépend de ce dont vous avez besoin pour le format que vous souhaitez avoir sur votre site, mais pour votre question actuelle, veuillez vous assurer qu'il y a " svg " dans la règle de votre fichier .htaccess.

Cela fonctionne, essayez-le! :)

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

n'oubliez pas les points et/---> ../not background ---> background-image: et n'oubliez pas d'effacer l'historique du navigateur et de l'argent

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