Question

我正在努力实现与此相似的东西

[ sometext ]     [ someothertext]
 actualtext         actualtext2

但我只是得到像

这样的东西

som[etext    ]        someoth[ertext        ]
          actualtext                 actualtext2

其中[]表示放置在背景中的图像。在语义上，我想/需要将堆叠的元素放在一起，例如。

<li class="software1">
            <div class="overlay">
                -soft1
            </div>
            20
        </li>

其中overlay元素应该是在lis背景前面的实际文本上方的文本。

我构建了一个显示问题的小jsfiddle http://jsfiddle.net/A3VRd/3/

我想要实现的是让上面的文字实际上高于＆＃34;正常＆＃34;文本，而不仅仅是提升，但好像它就在旁边。

Answer 1

我认为你忘了给出background-repeat属性。像下面一样更新你的CSS。

aside.compatibility .software1 {
        background-image: url("http://placehold.it/32x32");
        background-repeat:repeat-x;
    }

Fiddle Demo

Answer 2

这是你想要的吗？请查看link

你可能需要使用z-index css属性。

        .overlay {
    display: inline-block;
    position: absolute;
    top: 0px;
    width: 80%;
    height: 100%;
    background: #F00;
    padding: 10%;
    text-align: center;
    z-index: 10;
    visibility: visible;
    }
    .actual {
    display: inline-block;
    position: absolute;
    top: 0px;
    width: 80%;
    height: 80%;
    background: #00FFB8;
    padding: 10%;
    text-align: center;
    z-index: 0;
    visibility: hidden;
    }

Answer 3

我想有很多方法可以做到这一点。假设您不想使用背景重复（因为您当前将其设置为无），那么您需要为列表元素提供与您计划使用的背景图像相同的宽度。

这是与你类似的标记，但是我已经将带有背景图像的类应用到包含＆＃34; overlay＆＃34;文本。我也使用了span标签，因为它对我来说更自然，但是li里面的div是有效的，所以如果你愿意，你可以使用它。

<强> HTML：

<aside class="compatibility">
    <ul>
        <li> <span class="software1">Here's some Text</span>20</li>
        <li> <span class="software1">Some Other Text</span>20</li>
        <li> <span class="software1">Text of Another One </span>20</li>
    </ul>
</aside>

<强> CSS：

aside.compatibility ul {
    margin-top: 64px;
    list-style-type:none;
    position: relative;
}
aside.compatibility li {
    display:inline-block;
    padding-top:64px;
    margin-right:20px;
    width: 100px;
    text-align: center;
}
aside.compatibility .software1 {
    background-image: url("http://placehold.it/100x50");
}
aside.compatibility li span {
    display: block;
    background-repeat: no-repeat;
    background-position: center;    
    position:absolute;
    bottom: 20px;
    width: 100px;
    height: 50px;
    padding-top: 10px;
}

使用CSS将文本堆叠在元素上方

3 个答案: