使用UL的高分辨率子点图像

Question

我需要使用100 px宽的子弹图像作为ul，但是然后将其缩小到8px并使其表现得像普通的ul子弹列表。

ul.bg-img li {
    background-image: url(http://placehold.it/100x100);
    background-size: 8px 8px;
 ...
}

问题是子弹不与第一行内容对齐。如果我在li中放置了一个标题标签和一个段落，那么子弹就会显示在li元素的中间或它下面。

如果我添加一个边距和填充来移动它，它不适用于可变线高和内容量。

/* breaks when going to second line */
margin: 1.00em 0 0 -30px;
padding: 0 0 0 20px;

它应该像默认的项目符号：与顶级内容对齐。

http://jsfiddle.net/TheFiddler/nqvfj004/

注意：我需要使用100px高分辨率的子弹，因为这是用于导出Web预览以进行打印的webapp。

Answer 1

您应该将其放在li内的第一个元素上，而不是整个li。试试这个选择器：

ul.bg-img li *:first-child

demo

Answer 2

而不是背景图片请使用：list-style-image:url(http://placehold.it/100x100);并查看结果。你根本不需要使用背景。

Answer 3

从顶部设置background-position，在大字体元素上移位

首先，将您的background-position设置为顶部的某个值，而不是中心。我更喜欢使用calc(1em - 4px)，因为这会将8px高图像放在标准1em字体行的垂直中间。您可以使用top或其他基本单位作为旧版浏览器的后备广告。

ul.bg-img li {
    ...
    background-position: left top;
    background-position: left calc(0.5em - 4px);
    ...
}

接下来，您应该调整font-size大于1em的元素。你至少可以用两种方式做到这一点：

1. 调整可能出现在第一行的较大字体大小的元素，方法是将它们的位置向上移动并应用相应的负底边距。

   ul.bg-img li h1:first-child {
       position: relative;
       top: -0.25em;
       margin-bottom: -0.25em;
   }
   

＆＃13;
＆＃13;
h1, h2, h3 {
  margin: 0;
  padding: 0;
  line-height: 1;
}
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.75em;
}
h3 {
  font-size: 1.5em; 
}
ul.bg-img {
    list-style: none;
    margin: 0 0 0 0;
}
ul.bg-img li {
    background-image: url(http://placehold.it/100x100);
    background-size: 8px 8px;
    background-repeat: no-repeat;
    background-position: left top;
    background-position: left calc(0.5em - 4px);
    margin: 1em 0 0 -30px;
    padding: 0 0 0 20px;
}
ul.bg-img li h1:first-child {
    position: relative;
    top: -0.25em;
    margin-bottom: -0.25em;
}
ul.bg-img li h2:first-child {
    position: relative;
    top: -0.1875em;
    margin-bottom: -0.1875em;
}
ul.bg-img li h3:first-child {
    position: relative;
    top: -0.125em;
    margin-bottom: -0.125em;
}
＆＃13;
<h3>Background Image on li</h3>

<ul class="bg-img">
    <li>
        <h1>Bullet lines up with H1</h1>
    </li>
    <li>
        <h2>Bullet lines up with H2</h2>
        <p>Paragraph on second line</p>
    </li>
    <li>
        <h3>Bullet lines up with H3</h3>
        <span>Span on second line</span>
    </li>
    <li>
        <p>Paragraph on first line</p>
        <h3>H3 on second line</h3>
    </li>
    <li>
        <span>Span on first line</span>
        <h3>H3 on second line</h3>
    </li>
    <li>
        <p>Paragraph alone</p>
    </li>
    <li>
        <span>Span alone</span>
    </li>
</ul>
＆＃13;
＆＃13;
＆＃13;

1. 对列表项的所有直接子项应用固定的行高。在此使用rem代替em。

   ul.bg-img li>* {
       line-height: 1.25rem;
   }
   

＆＃13;
＆＃13;
h1, h2, h3 {
  margin: 0;
  padding: 0;
  line-height: 1;
}
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.75em;
}
h3 {
  font-size: 1.5em; 
}
ul.bg-img {
    list-style: none;
    margin: 0 0 0 0;
}
ul.bg-img li {
    background-image: url(http://placehold.it/100x100);
    background-size: 8px 8px;
    background-repeat: no-repeat;
    background-position: left top;
    background-position: left calc(0.5rem - 4px);
    margin: 1em 0 0 -30px;
    padding: 0 0 0 20px;
}
ul.bg-img li>* {
    line-height: 1.25rem;
}
＆＃13;
<h3>Background Image on li</h3>

<ul class="bg-img">
    <li>
        <h1>Bullet lines up with H1</h1>
    </li>
    <li>
        <h2>Bullet lines up with H2</h2>
        <p>Paragraph on second line</p>
    </li>
    <li>
        <h3>Bullet lines up with H3</h3>
        <span>Span on second line</span>
    </li>
    <li>
        <p>Paragraph on first line</p>
        <h3>H3 on second line</h3>
    </li>
    <li>
        <span>Span on first line</span>
        <h3>H3 on second line</h3>
    </li>
    <li>
        <p>Paragraph alone</p>
    </li>
    <li>
        <span>Span alone</span>
    </li>
</ul>
＆＃13;
＆＃13;
＆＃13;

Answer 4

尝试从顶部为所有Li元素或仅第一个Li元素设置背景位置。

对于李先生：

ul.bg-img li:first-child {
background-image: url(http://placehold.it/100x100);
background-size: 8px 8px;
background-position: left 10px;  /* 10px is dummy value you can set as per your requirement. */
.....
}

For All Li：

ul.bg-img li {
background-image: url(http://placehold.it/100x100);
background-size: 8px 8px;
background-position: left 10px;  /* 10px is dummy value you can set as per your requirement. */
.....
}