html: 设置background-image的大小使自动适应所在容器
样式描述:想给无序列表中每个<li>标签中文字后添加一个图片<body><ul class="nav"><li>一级菜单<span></span></li><li>二级菜单<span></span></li>...
·
样式描述:想给无序列表中每个<li>标签中文字后添加一个图片
<body>
<ul class="nav">
<li>一级菜单<span></span></li>
<li>二级菜单<span></span></li>
<li>三级菜单<span></span></li>
<li>四级菜单<span></span></li>
<li>五级菜单<span></span></li>
<li>六级菜单<span></span></li>
<li>七级菜单<span></span></li>
</ul>
</body>
①图片为:
原效果展示:
问题描述:图片无法自适应大小,只能展示一部分
解决代码如下:加上最关键的:background-size:100% 100%;
.nav>li>span{
background: url("../img/rightarr.png") no-repeat center center;
background-size:100% 100%;
display:inline-block;
width: 32px;
height: 32px;
}
设置后效果展示:
更多推荐
已为社区贡献1条内容
所有评论(0)