ホームページ > 記事 > ウェブフロントエンド > float属性を外した場合、span内の背景画像は表示されるのでしょうか？ _html/css_WEB-ITnose
float属性を外した場合、span内の背景画像は表示されるのでしょうか？ _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:13:211055ブラウズ
CSS を初めて使用するので、フロートを削除した後、背景画像が表示されず、firebug で spam 要素が見つからないという奇妙な問題が発生しました。原因は何ですか? (解決策)
また、float属性を使用しない場合、背景画像を表示するにはどうすればよいでしょうか？
これでいいんじゃないの？<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>文本框中的事件应用</title> <style type="text/css"> .spnInit{width:179px;height:40px;line-height:40px;float:right;background: url('Images/pic_Email_ok.gif') no-repeat;} </style></head><body> <span id="spnTip" class="spnInit"></span></body></html> span は中に中身が無い場合は高さも幅もないので消えてしまいます。
spanをdisplay:blockに設定すると、コンテンツがない場合でも設定した高さと幅が有効になります。
スパンは線要素で、中にコンテンツが無い場合は高さと幅がないので消えます。
spanをdisplay:blockに設定すると、コンテンツがない場合でも設定した高さと幅が有効になります。
しかし、なぜ float 属性はコンテンツなしでスパンを表示するかどうかにも影響するのでしょうか?これについては本当に混乱しています
。 。知っている。 。表示を設定できます:attribute inline-block;
float を追加するとブロック要素になります
次のように背景の位置を調整できます: -position:-50px -30px ;/*-50px は水平方向に 50px 左にインデントすることを意味し、-30px は垂直方向に 30px 上にインデントすることを意味します
位置を調整するだけで、背景をフローティングにする必要はありません。
フロートを設定すると、スパンは自動的にブロック要素になります
そして、スパンの幅と高さを設定すると、 背景画像が見えるようになります
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。