Question

我有一个基于无序列表的滑块。它的制作方式是在<li>顶部显示背景图像，然后显示文本和标题。

这样可以正常工作，但它会拉伸背景图像，并使用:cover剪切图像。我有一个很好的CSS解决方法来使用图像而不是背景图像，但随后文本被推到底部。我想知道是否有办法将这个类添加到背景图像

img {
    width: 100%;
    float: left;
    margin-right: -100px;
    position: relative;
}

或者......我可以设置列表项的样式以在此标记的图像上显示吗？

<li>
    <img class="img" src="images/sandpiperBG.jpg" />
    <h1>Fluid, flexible, fantastically minimal.</h1>
    <p>Use any HTML in your slides, extend with CSS. You have full control.</p>
</li>

我尝试向z-index和<ul>添加<ul><li>，但它无效。

Answer 1

z-index控制顶部的内容，但它不会从文档流中取出对象。如果你想在文档流程之外使用图像，你可以绝对定位，然后z-index开始发挥作用。

如果这些选项都不起作用，最好的选择可能是调整图像大小以防止拉伸或切割。

Answer 2

您需要将IMG更改为DIV，以便您可以使用背景图片。

HTML：

<div class="myimg" />

CSS：

.myimg {
    width: 100%;
    float: left;
    margin-right: -100px;
    position: relative;
    background-image:url('images/sandpiperBG.jpg')
}

将类添加到背景图像？

2 个答案: