[英]how can I give background image to li?
邊框圖像未顯示有人可以幫助我嗎?
#sidebar li {
padding-left: 30px;
border-bottom: 1px dotted #4A3903;
background: url(images/example.PNG) no-repeat 15px 50%;
}
您要背景圖片還是邊框圖片? 對於background-image,請使用background-image並引用您的網址:
#sidebar li {
padding-left: 30px;
border-bottom: 1px dotted #4A3903;
background-image: url('images/example.PNG') no-repeat 15px 50%;
}
對於border-image,請使用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;
}
嘗試添加
display: block;
以及您的樣式。 (如果需要,內聯塊也可以工作)
我試過你的代碼- 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
未顯示為FULL。
當您向li
標簽添加與image
相等的width
和height
,它將解決此問題。
#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;
}
更新 - 演示
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.