png画像の背景について

png画像の背景云々についての質問です。どう書けばいいものか分からなかったので、文章めちゃくちゃですごめんなさい。

何でpng画像？

元の画像はFLOWERという文字とその上のアイコンだけしかないらしい

とりあえず画像ダウンロードしてみて自分で試してた結果変な表示になった

自分で試した時のコード

<div class="mark"></div>

.mark{
    margin: 0 auto 16px;
    width: 131px;
    height: 116px;
    background-image: url("4.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

上記のウェブサイトFLOWERとその上にあるアイコンがpng画像で出来ているのが不思議でよく分かりません...。
画像ファイルは四角い領域を持っているのに、どうしてFLOWERとアイコンだけ画像として出てくるの？みたいな感じでちんぷんかんぷんなんです..。何で画像なのに背景と同化してるのみたいな感じです。伝わらなかったらごめんなさい；；

追記の画像

kei344

2019/03/02 10:58

usui_orangeさんが何を前提にしているのかがわかりません。不思議でない状態をどういうものと考えているかも質問文に追記していただけませんか？

usui_orange

2019/03/02 15:32

新しく画像を追加しておきました。黄色く塗った部分にどうして親要素が持つバックグラウンドの画像が写っているのかが不思議で分からないんです。元の画像は黒い？みたいなので黄色く塗った部分は黒くなると思ううんですが、どうしてなんだろうなあって感じです。。。文章へたくそですみません...；；

行動規範の内容に同意します

回答2件

ベストアンサー

黄色く塗った部分にどうして親要素が持つバックグラウンドの画像が写っているのかが不思議で分からないんです。元の画像は黒い？みたいなので黄色く塗った部分は黒くなると思ううんですが、どうしてなんだろうなあって感じです。

PNGは透明度も表現できるフォーマットなので、「背景が透明の画像」を作成できます。

【Portable Network Graphics - Wikipedia】
https://ja.wikipedia.org/wiki/Portable_Network_Graphics

透過についてはクロマキーによる透過指定、および8ビットから16ビットのアルファチャンネルをサポートする。

投稿2019/03/02 15:40

kei344

総合スコア69407

usui_orange

2019/03/03 03:32

なるほどなるほどありがとうございます；；質問文に載せたウェブサイトでは透過画像が用いられていたんですね。では自分はウェブサイトに載っていたpng画像をダウンロードして、バックグラウンドに指定したのですが、どうして透過されなかったのでしょうか？

usui_orange

2019/03/03 03:34

透過画像というのは、透過画像を作成してバックグラウンドに指定するだけではなく、他に何かしらの設定や記述が必要になるのでしょうか？

kei344

2019/03/03 03:47

> 他に何かしらの設定や記述が必要になるのでしょうか？不要です。 https://jsfiddle.net/u82h6bt1/ 上記以外に手元の環境でも試しましたが問題ありませんでした。他にスタイルが当たっていることを疑ったほうがよいのでは。【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】 https://nandemo-nobiru.com/2944/

usui_orange

2019/03/03 06:37

記述を書き直してみたらうまく出来ました。疑問が解決出来ました、とっても助かりました。ありがとうございます！！！

行動規範の内容に同意します