html -
  • 上的背景图像变为背景而不是列表元素符号
  • 所以我想要一张图片成为我列表的元素符号。 我想用一张背景图片变成一颗子弹。但它成为元素的背景。

    ul {
      list-style-type: none;
    }
    
    li {
      background-image: url('https://via.placeholder.com/50')
    }
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>

    必须使用 background-image 而不是 list-style-image

    我需要改变什么?

    最佳答案

    如果您想使用 background-image 属性,这里是一个工作示例:

    ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    }
    
    li {
     background-image: url(https://developer.mozilla.org/static/media/edge.40018f6a.svg);
    background-repeat: no-repeat;
    background-position: 0 .4em;
    padding-left: 20px;
    }
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>

    这是一个使用 list-style-image CSS 属性的例子

    ul {
      list-style-type: none;
    }
    
    li {
      list-style-image: url('https://via.placeholder.com/50')
    }
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>

    关于html - <li> 上的背景图像变为背景而不是列表元素符号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69193068/

    相关文章:

    c++ - 如何在给定输入的数字中找到最大的数字?

    c++ - 如何获取属于某个范围的 vector 中的最大元素?

    html - 使 flexbox 垂直增长

    python - 在 PySpark 中的 groupby 之后计算 sum 和 countDist

    javascript - 如何给一个空的 td 上课?

    javafx - 在 javafx 中显示单 Pane 警报

    javascript - Material ui 版本 4-11.4 的文档丢失

    r - 根据R中的组和行计算差异

    c++ - std::transform 中未解析的重载函数类型

    r - 如何在 R 中为函数添加红线