web-dev-qa-db-ja.com

SVGの背景画像が表示されない

Divの背景として緑色のpng画像を配置しましたが、次のようになります。

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：ここに ' SVGファイルへのDropboxリンク。

htmlcsstwitter-bootstrapsvgbackground-image
6
bijoume

あなたはおそらくすでにそうしましたが、tech_bg.svgが本来あるべきディレクトリ（imgフォルダ）にあり、ファイル名の大文字と小文字の区別を含め、テキストエディタとまったく同じスペルであることを絶対に確実に確認することをお勧めしますおよびファイル拡張子。 GitHubは確かに文字通り拡張子の大文字と小文字を区別しますが、同じ理由でSVGファイルのアップロードに問題がありました（.svgと.SVG）。

これはOPの解決策でした。詳細についてはコメントを参照してください：次の質問は、どのようにしてSVGを作成したかです。 ？どのソフトウェアを使用しましたか？Illustratorで正しく生成しましたか？それを行うにはかなり具体的な方法があります。

頭に浮かんだ他の唯一のことは、特にテキストが本当に消えた場合に、z-indexの#aboutprocessを増やすことでした（テキストはまだそこにあると思いますが、白だけですが、確認のために強調表示してみてください） 。 no-repeat、left、topなど、近くにある他のCSS値も試してみてください。

ブラウザのキャッシュをクリアして一度更新してみてください。他のブラウザも試してください。また、万が一IE8以下またはAndroid 2.3以下）を使用している場合は、間違いなくそれが原因です。

不整合が発生しているローカルマシンでテストすることはできないため、明確に答えるのは難しい質問です。

1
Kyle Vassella

私はこの質問が古くて解決されていることを知っていますが、他の誰かがこの特定の問題を抱えている場合（そしてこの質問はGoogleにうまく配置されています）：ウェブサーバーが間違った「content-type」ヘッダーで転送した場合、ブラウザはsvgを表示しません。 Webサービスが「application/octet-stream」または「text/xml」を返す場合、正しく転送され、SVGファイル自体は正常であるにもかかわらず、画像は正しく機能しません。

SVGの正しいメディアタイプはimage/svg+xml

4
Felype

問題が必ずしもCSSに起因するとは限りません。サーバーがcssファイル（background：url（ "../）からsvgファイルを認識できるように、次の行を。htaccessに追加してみてください。 img/tech_bg.svg "）no-repeat left top;）、次の行を挿入します：

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