h1にテキストをいれていますが、それを背景画像で見せたいため、display:none;で見えなくしています。
背景画像logo.pngは表示させたいのですが、Dreamweaver上では表示されてもプレビューでどのブラウザでも消えてしまいます!
どなたかよろしくおねがいします!
【CSS】
#logo{margin:40px 50px 0px 0px;
padding:0px;
background:url(images/logo.png) no-repeat;
}
h1{margin:0px;
padding;0px;}
h1 span{display:none;}
h2{margin:0px 50px 0px 0px;
padding:0px;}
h2 span{display:none;}
---
【HTML】
<h1 id="logo"><span>Ethiopa</span></h1>
<h2><span>Ethiopa Blog</span></h2>
No.2ベストアンサー
- 回答日時:
> visibility:hiddenとdisplay:none;はずいぶん違うんですね。
visibilityプロパティは「要素が生成するボックスの表示・非表示を指定。ただし、要素を非表示に指定しても、その要素が生成するボックス分のスペースは残り、レイアウトにも影響する。」であり、displayプロパティは「要素が生成するボックスをどのように表示させるか、その表示形式を指定。」です。
ですので
"visibility: hidden"だと「要素が生成するボックスを不可視(透明)にする」だけなので、”見えて”いないだけで要素分のスペースは確保されています。この場合だと、h1の持つ幅(特に指定していなければ親要素の幅と同一)×テキスト”Ethiopa”の高さ、が背景画像のレンダリング領域として与えられます。しかし、"display: none;"だと「何も表示しない(要素自体がない)」となってしまうので、当該要素分の空白も生成されない為、”中味がない”という状態になります。
なので、後者(h1 span{display:none;})だと、
<h1 id="logo"><span>Ethiopa</span></h1>とした場合、
<span>Ethiopa</span>の部分は「透明」とはならず「中味なし」となってしまう為、親要素の<h1 id="logo">~</h1>も中味なし=幅も高さも生成されない、という状態になります(margin分は別ですが、それは外側の余白です)。ですので、いくらh1#logoに背景画像を設定してあっても、それをレンダリングする領域が生成されない為、何も表示されない様に見えるのです。もし<span>に対して"display: none;"を使うなら、<h1>に対して予め(背景画像を表示する分の)幅と高さを具体的に設定しておく必要がある、という事です。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript htmlとcssで分数を表示後、分数の右側に文書を書きたい 1 2022/04/28 10:09
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
超音波で洗脳。
-
CSS:overflow要素の印刷について
-
input type="hidden"で取得した...
-
タグは大文字と小文字どちらが...
-
マージソートの計算量について-...
-
「諸要素」とはどういう意味で...
-
質問1.
-
含む含まないという概念自体の...
-
テキストボックスの中にリンク...
-
NからZへの全単射を具体的に構...
-
メールアドレス(グループ)の...
-
C言語線形リストの問題です
-
Bootstrap レスポンシブ textarea
-
エクセルVBAにてURLの抽出
-
エクセルでグラフにマークを入...
-
textareaの幅を画面と合わせたい
-
レスポンシブサイトで、右側に...
-
初歩的な質問です。<div>のwidt...
-
IEと他ブラウザでの行間について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
smallにtext-allignが効かない
-
含む含まないという概念自体の...
-
還暦を過ぎた方々に質問です。
-
「諸要素」とはどういう意味で...
-
質問1.
-
textareaの幅を画面と合わせたい
-
角丸画像の背景色を透明にした...
-
2個のFormを横並びにしたい
-
テキストボックスの中にリンク...
-
HTMLです 四角みたいにして中に...
-
CSS:overflow要素の印刷について
-
input type="hidden"で取得した...
-
tdに対してmin-heightの定義、...
-
HTMLページ上でiframeを最前面...
-
タグは大文字と小文字どちらが...
-
HTMLです
-
2行にしたい要素、改行か分割...
-
改行ほどは行かないけど、若干...
-
H1タグを画像にしたい
おすすめ情報