ホームページ >ウェブフロントエンド >htmlチュートリアル >image_html/css_WEB-ITnose の左上隅にテキストのレイヤーをオーバーレイする方法
image_html/css_WEB-ITnose の左上隅にテキストのレイヤーをオーバーレイする方法
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-06-21 09:47:191529ブラウズ
<style>.autosf { width:170px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -icab-text-overflow: ellipsis; -khtml-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -webkit-text-overflow: ellipsis;}.wheelplayer_box{ overflow:hidden; clear:both; width:100%;}.wheelplayer_box ul{ width:100%; height:150px; overflow:hidden; text-align:center;}.wheelplayer_box ul li{ width:170px;height:120px;float:left; display:none; text-align:center; margin: 0 11px;}.wheelplayer_box ul li img{ display:block; margin:0 auto 5px; width:170px; height:120px; border:none;}</style><div id="radio_show" class="wheelplayer_box"><ul> <li style="display: list-item;"><a href="#" title="" target="_blank"> <img width="180" height="120" alt="" src="http://127.0.0.1/test.jpg"><div id="sff" class="autosf">{title}</div></a> </li></ul></div> 上記のコードは、表示後に画像の左上隅にテキストを追加したいと思います。つまり、別のレイヤーを追加しますか?どのように達成するか?
または、次の効果を達成します
ディスカッションに返信 (解決策)
.autosf {margin-top: -120px;margin-left: -60px; これに特定の値を変更する必要があるかどうかを確認してください。効果は何ですか 080b747a20f9163200dd0a7d304ba388 #text_img{position:absolute;}
c9ccee2e6ea535a969eb3f532ad9fe89
2de448a710968a1b8af8b59876c1891d
img
16b28748ea4df4d9c2150843fecfba68
同じレベルに配置された 2 つの絶対位置のオブジェクト
左上隅の座標は両方とも 0 0 です
絶対位置 レイヤーを定義します 左上隅 left: 0 top:0 で十分です
私が投稿したコードを修正してもらえますか?
位置決め、外側の位置、相対、、内側の位置、絶対、、
相対的な位置決め。 。 。
コンテナレイヤーはposition:relativeを使用します
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。