Question

我的每个li元素都有一个背景图片，我希望通过使用background-size:contain;来做出响应但是它不能按预期工作，你可以看到实时here（你可以得到）当您在该页面时，通过在Firefox中按Ctrl + Shift + m来响应视图测试器）。

HTML：

<div class="menu">

    <ul class="menu_ul">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>

    </ul>

</div>

CSS：

<style>

    body{

        width:50%;
        margin: 0 auto;
        border:1px solid red;
    }
    .menu{

        width:36%;
    }
    .menu ul{
        border:1px solid red;
        margin: 0;
        padding: 0;
    }
    .menu li{

        list-style: none;
        margin-bottom: 2px;
        color:#ffffff;
        background-image: url("img/bg1.png");
        background-repeat:no-repeat;
        background-size:contain;
        background-position:center;
        text-align: center;
    } 
    .menu li:hover{

        background-image: url("img/bg2.png");
    }

</style>

如何使其响应？

Answer 1

您可以在没有背景图像的情况下实现类似的效果，并且它会有响应。以下是伪元素和倾斜变换的示例：

body {
  width: 50%;
  margin: 0 auto;
  border: 1px solid red;
}

.menu {
  width: 36%;
}

.menu ul {
  border: 1px solid red;
  margin: 0;
  padding: 0;
}

.menu li {
  list-style: none;
  margin-bottom: 2px;
  color: #ffffff;
  position: relative;
  text-align: center;
  overflow: hidden;
}

.menu li:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  transform: skew(-40deg);
  transform-origin: top right;
}

.menu li:hover::before {
  opacity:0.6;
}

<div class="menu">
  <ul class="menu_ul">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
  </ul>
</div>

Answer 2

使用contain，背景图像将始终以适合整个图像的方式放入其容器中（与cover相对）。在这种情况下，高度将是容器的100％，宽度将根据原始图像比例与高度成正确/原始比例。

由于li元素的高度不同，因此在较小的屏幕上背景图片大小不会改变，这是使用contain时的预期行为

如果您想更改它，可以使用background-size: 100% 100%在li元素的整个宽度上拉伸该图像。由于您的背景图像不是照片，而是一个相当简单的图形图像，因此效果很好。

HTML列表中的响应式背景图像问题

2 个答案: