0

ネストされたdivを使用して、各divには背景画像があり、画像を並べて表示したい

星を並べようとしています。これが私のhtmlとcssのコードです

<body>
  <div class="rate-stars">

    <div class"star" id="s5"><pre> </pre>
        <div class"star" id="s4"><pre> </pre>
            <div class"star" id="s3"><pre> </pre>
                <div class"star" id="s2"><pre> </pre>
                    <div class"star" id="s1"><pre> </pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
       </div>

</body>
</html>

私のCSS：

.star
{
background-image: url("star-off.png");
float: left;
border: 0px;
width: 20px;
height: 20px;
margin: 0px;
padding: 20px;
}
4

3 に答える 3

1

次のことができます：

HTMLは次のように書くことができます：

<div id="rate-stars">

<img id="star1" src="img/star1.png">
    <img id="star2" src="img/star2.png">

</div>

Css：

    #star1 {
      left: 20px;
      position: absolute;
      top: 100px;
     }
    #star2 {
      left: 60px;
      position: absolute;
      top: 100px;
     }
于 2013-02-28T11:36:36.943 に答える
1

このCSSを試してください

.star
{
background-image: url("star-off.png") no-repeat top left;
border: 0px;
padding-left: 20px;
height: 20px;
margin: 0px;
}
于 2013-02-28T11:37:11.013 に答える
1

デモ

最初の問題は=、すべてのクラス割り当てが欠落していることです。

 <div class"star"
          ^ missing =

それらを修正すると、このCSSはそれを行います：

.star
{
    background-image: url("star-off.png");
    background-repeat:no-repeat;
    width: 20px;
    height: 20px;
    margin-left:25px;
}
于 2013-02-28T11:43:01.113 に答える