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

Question

我的每个 li 元素都有一个背景图像，我想通过使用 background-size:contain; 使其响应，但它没有按预期工作，您可以看直播here (当您在该页面上时，您可以通过在 Firefox 中按 Ctrl+Shift+m​​ 来获得响应式 View 测试器)。

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>