コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > div+css はテキストを画像上に配置する必要があり、画像サイズは固定_html/css_WEB-ITnose

div+css はテキストを画像上に配置する必要があり、画像サイズは固定_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 11:32:58
オリジナル
1350 人が閲覧しました

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：

;



sdafdsafdsa


次のように画像の上にテキストがあり、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>
ログイン後にコピー

関連ラベル：
div+css想要文字在图片上，图片大小固定
ソース：php.cn
前の記事：HTML5 のスタイルとリスト、CSS の 4 つの状態 links_html/css_WEB-ITnose 次の記事：HTML_html/css_WEB-ITnose の em と b の違い
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
モバイル サイズの画面で段落を左側に移動するための CSS および HTML メソッド 通常の 16:9 のコンピュータ画面では、左側にテキスト、右側に画像が表示され、完璧に見えます。ただし、小さい画面 (携帯電話サイズの画面など) では、希望どおりに段落の上に画像が...
から 2024-04-04 20:25:22
0
1
330
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート