ホームページ >ウェブフロントエンド >htmlチュートリアル >div+css はテキストを画像上に配置する必要があり、画像サイズは固定_html/css_WEB-ITnose
div+css はテキストを画像上に配置する必要があり、画像サイズは固定_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:32:581341ブラウズ
css:
.p1{z-index: 1;width: 20;border-top: 5;border-right: 5;border-left: 5;border-bottom: 10;border-color: black}
。 p2{font-family: ファッショナブルなミディアムとブラックの簡体字;font-size: 30pt;color: グレー;z-index: 2}
html：
100db36a723c770d327fc0aef2ce13b1
b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f ;
9d08974fffd817ab0a0349df87ad59c3
9c3bca370b5104690d9ef395f2c5f8d1
7b6da03b7a4932ca294e5f475ed10e2716b28748ea4df4d9c2150843fecfba68
013740b76df1b4612b3d01bf5a893c7asdafdsafdsa16b28748ea4df4d9c2150843fecfba68
73a6ac4ed44ffec12cee46588e518a5e
次のように画像の上にテキストがあり、CSSで設定したような枠線が表示されないのはなぜでしょうか。
返信 ディスカッション (解決策)
画像の再送信 画像の上のレイヤーにテキストが欲しい P2 が絶対に配置されています。そしてあなたの div には幅と高さがないので、境界線はありません。
外層にdivを追加します
.p{
position:relative
.p2 {
position:absolute
// Set top,left
<div class="p"><div class="p1"><img src="p1.jpg"></div><div class="p2">sdafdsafdsa</div></div>
は相対配置と絶対配置で解決できます。また、境界線には単位 px が追加されません。以下は修正されたものです。
<html><head><title></title><link rel=stylesheet type="text/css" href="1.css"><style>.p1{z-index: 1;width:300px;height:200px;border:5px solid black;position:relative;}.p1 img{width:250px;height:180px;}.p2{font-family: 时尚中黑简体;font-size: 30px;color: gray;z-index: 2;position:absolute;left:30px;top:50px;}</style></head><body> <div class="p1"><img src="p1.jpg"> <div class="p2">sdafdsafdsa</div> </div></body></html>