html: 设置background-image的大小使自动适应所在容器

最新推荐文章于 2024-05-07 07:25:58 发布

鱼巷、猫未随

最新推荐文章于 2024-05-07 07:25:58 发布

阅读量2.5w

点赞数 7

分类专栏：前端文章标签： html background-image 自适应

本文链接：https://blog.csdn.net/weixin_42153410/article/details/102454325

版权

前端专栏收录该内容

7 篇文章 2 订阅

订阅专栏

样式描述：想给无序列表中每个<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;
     }

设置后效果展示：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

鱼巷、猫未随

关注关注

7
点赞
踩
17

收藏

觉得还不错? 一键收藏
3
评论
html: 设置background-image的大小使自动适应所在容器

样式描述：想给无序列表中每个<li>标签中文字后添加一个图片<body> <ul class="nav"> <li>一级菜单<span></span></li> <li>二级菜单<span></span></li> ...
复制链接

扫一扫