Question

边框图片没有显示任何人都可以帮助我吗？

#sidebar li {
padding-left: 30px;
border-bottom: 1px dotted #4A3903;
background: url(images/example.PNG) no-repeat 15px 50%;
}

Answer 1

您想要背景图片还是边框图片？对于背景图片，请使用 background-image 并引用您的网址：

#sidebar li {
   padding-left: 30px; 
   border-bottom: 1px dotted #4A3903; 
   background-image: url('images/example.PNG') no-repeat 15px 50%; 
}

对于边框图像使用border-image：

 #sidebar li {
        padding-left: 30px; 
        border-bottom: 1px dotted #4A3903; 
        -webkit-border-image:url('border.png') 10 10 round;
        -o-border-image:url('border.png') 10 10 round; 
        border-image:url('border.png') 10 10 round;
     }

Answer 2

尝试添加

display: block;

也适合你的风格。（如果需要，内联块也可以工作）

Answer 3

我已尝试使用 - DEMO

代码

<div id="sidebar">
    <ul>
        <li></li>
    </ul>
</div>

<强> CSS

#sidebar li {
padding-left: 30px;
border-bottom: 1px dotted #4A3903;
background: url(http://www.placehold.it/200x200) no-repeat 15px 50%;
}

但是background-image没有显示完全。

当您将width和height添加到li标记等于您的image时，它将解决问题。

#sidebar li {
padding-left: 80px;
border-bottom: 1px dotted #4A3903;
background: url(http://www.placehold.it/50x50) no-repeat 0px 0px;
width:auto;
height:50px;
list-style:none;
font-size:24px;
vertical-align: middle;
display: table-cell;
}

更新 - DEMO

我怎样才能给李某提供背景图片？

3 个答案: