ホームページ > ウェブフロントエンド > htmlチュートリアル > image_html/css_WEB-ITnose の左上隅にテキストのレイヤーをオーバーレイする方法

image_html/css_WEB-ITnose の左上隅にテキストのレイヤーをオーバーレイする方法

WBOY
リリース: 2016-06-21 09:47:19
オリジナル
1501 人が閲覧しました

この投稿は、wealsh によって最終編集されました: 2013-11-14 21:34:47

<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;
ログイン後にコピー


これに特定の値を変更する必要があるかどうかを確認してください。効果は何ですか