css - 画像の中央に透明な要素を持つすべての画面を埋めるCSS画像

Question

私はCSSを使用してこの状況にあります。

画面の中央に画像を配置したいのですが、画面のサイズに関係なく、常に中央に配置します。それはとても簡単です。

でも、真ん中に入れたい画像（.png）は黒くて透明な文字が入っています。

そのため、画面全体を黒にしたいのですが、画面の中央には透明な文字が残っています。

透明な文字が必要な理由は、ページの読み込み中にスクリプトを使用して文字を塗りつぶしているためです。アイデアはプログレスローディングバーに基づいていますが、この場合、「バー」として文字を使用しています。

どうすればそれを達成できますか？画像をdivで囲んでみましたが、画面サイズによっては、一部のdivが画像に到達せず、空白が残る場合があるため、これは最善の方法ではありません。

何を指示してるんですか？私は何を読むべきですか？

はっきりさせなかった場合に備えて、次の画像をご覧ください。

ヘルプ画像

score 1 · Accepted Answer

私が現在考えることができる最良のオプションは、中央の周りの画面を黒くするimgことbox-shadowです：

#main {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -250px 0 0 -250px;
    box-shadow: 0 0 0 500px #000;
}

もちろん、これには、ブラウザがbox-shadowプロパティ（またはベンダープレフィックス付きの実装の少なくとも1つ）をサポートしている必要があり、ブラーの「広がり」にはかなり任意の数が必要です。

残念ながら、私はむしろborderプロパティを使用したいのborderですが、はレイアウトに影響を与え、配置時に補正する必要がありimgますbox-shadowが、はページのレイアウトには影響しません。

このデモンストレーションでは、明らかに、を、またはローディングバーを表すために使用している代替手段background-colorに置き換える必要があります。background-image

score 0 · Accepted Answer

画面全体を黒くしたいのですが、見たい透明な文字がありますか？

必要なものが正しく理解できたら、ボディ（またはhtmlオブジェクト）の背景色を黒にして画像を保持しますが、絶対位置を使用してロゴのすぐ後ろに白（または色付き）の画像を配置します。

なぜ透明な文字が必要なのかわかりませんが、背景は黒です。

2 に答える 2