0

以下のコードを使用して製品 ID を表示しています。各リストの背景画像を使用します。画像を前面に出し、テキストを背面に戻したい。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.addcart
{

}
 .addcart ul{
     list-style:none;
        }
 .addcart li{
     list-style:none;
          background-image:url(round.png);
            background-repeat: no-repeat;
            height:45px;
            top:0px;
        }
        .addcart h3
        {
            font-size:24px; 
            font-weight:bold;
            padding:10px 0px 40px 10px; 
            color:#F00;
            z-index:400px;  
            position:relative;
        }
</style>
</head>

<body>
<ul class="addcart">
<li><span><h3>96</h3></span></li>
<li><h3>97</h3></li>
</ul>

</body>
</html>
4

5 に答える 5

1

テキストを非表示にするだけの場合は、次のようにします。

.addcart h3 {
    position : absolute;
    left     : -9999px;
}

デモ: http://jsfiddle.net/PFMHr/

于 2013-02-06T06:11:38.887 に答える
1

テキストを戻したいですか？代わりに非表示にすることをお勧めしますか

display:none;

これがあなたの仕事にとって実行可能な解決策ではない場合、機能について詳しく説明していただけますか?

于 2013-02-06T06:12:48.140 に答える
0

.addcart li に追加できますか?

text-indent:-9999em;

于 2013-02-06T06:11:32.113 に答える
0

最良の方法は、 Javascipt または jQuery を介してそのテキストの表示プロパティをnoneに設定することだと思います。返送する必要はありません。それとも、返送する特別な理由がありますか？

于 2013-02-06T06:25:11.413 に答える
0

z-index はピクセル単位で指定されるプロパティではありません。

z-index: 400;

また、この方法で h3 を使用するのは最適ではありません。代わりにスパンを使用します。とにかく、フォントサイズを大きくしているので、これを h3 で中継する必要はありません。

于 2013-02-06T06:39:52.867 に答える