如何在 css 中的前后属性中插入图像并处理它的大小

Question

我不知道为什么我的代码不起作用😔顺便说一句，我想在 css 属性之前的内容中添加图像，我已经这样做了，但我不知道我如何给出我想要的尺寸，因为它的图像是实际的现在的尺码😔

li::after{

    content:" ";

    width: 70px;

    height: 70px;

    top: 10px;

    background-image: url("https://i.pinimg.com/originals/9f/16/32/9f163259165a9031b62fbd8c38746645.jpg?hl=en_US");

    background-repeat:no-repeat ;

    background-size:70px 70px;

    border-radius:35px;

    position: absolute;

    border-top:2px solid #222;

    background:#222;

    justify-content:center;

}

我想在 before 属性的内容中缩短图像大小的问题

Answer 1

如果您需要确保图像始终适合框内（70x70px），您可以使用

background-size: cover

CSS 值 确保图像始终覆盖完整尺寸（但裁剪了部分内容）。此外，如果您希望图像始终居中对齐，您可以使用

background-position: center

CSS value 代替

justify-content

（用于 Flex 代替）

li::after {
  content: ' ';
  width: 70px;
  height: 70px;
  top: 10px;
  background-image: url('https://i.pinimg.com/originals/9f/16/32/9f163259165a9031b62fbd8c38746645.jpg?hl=en_US');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 35px;
  position: absolute;
  border-top: 2px solid #222;
}

li:hover::after {
  background-image: url('https://placekitten.com/200/200');
}

<ul>
  <li>Test</li>
</ul>

Answer 2

你的代码很好，除了你有一个背景：#222 在设置背景图像之后。这会覆盖背景图像。

如果你也想放背景颜色，那么明确说明（或者在背景图像设置之前放背景：#222）。

<style>
  li::after {
    content: " ";
    width: 70px;
    height: 70px;
    top: 10px;
    background-image: url("https://i.pinimg.com/originals/9f/16/32/9f163259165a9031b62fbd8c38746645.jpg?hl=en_US");
    background-repeat: no-repeat;
    background-size: 70px 70px;
    border-radius: 35px;
    position: absolute;
    border-top: 2px solid #222;
    background-color: #222;
    justify-content: center;
  }
</style>
<ul>
  <li>
  </li>
</ul>