楼层箭头问题

<!--层楼标题-->
  <div class="floor-1">
    <p style="color: #fff;width: 30px;height: 30px;line-height:30px;border-radius: 50%;background: #000;text-align: center;display: inline-block;">1F</p>
    <p style="font-weight: bold;display: inline-block;">服装鞋包</p>
    <span>大牌</span>
    <span>男装</span>
    <span>女装</span>
  </div>

/*层楼设置*/
.floor{
    width: 1188px;
    margin-left:15%; 
}

.floor-1{
    margin-top: 100px;
    padding-bottom: 5px;
    border-bottom: 1px solid red;
}

.floor-1 span{
    float: right;
    margin: 0 10px;
}

应该是点击那个更改那个元素的底边框，把他变成素材中的箭头图片，对吗，但我之知道更改元素的背景图片，不知道怎么更改元素的底边框为图片，怎么实现呢？

qq_陌_45 2018-01-23

源自：项目：JQ实现瀑布流 5-2 作业题

收起

2回答

怎么都被占用了呢 2018-01-24 16:13:31

位置还需你做详细的调试

收起回答

好帮手慕糖 2018-01-24 10:14:34

你好，这里可以设置background-position属性，来调整背景图片的位置哦。

祝学习愉快~

收起回答

提问者 qq_陌_45 #1

<div class="floor">  <div class="floor-1"> <p style="color: #fff;width: 30px;height: 30px;line-height:30px;border-radius: 50%;background: #000;text-align: center;display: inline-block;">1F</p> <p style="font-weight: bold;display: inline-block;">服装鞋包</p> <span class="floor-jt">大牌</span> <span>男装</span> <span>女装</span> </div>  <div> </div> </div> /*层楼设置*/ .floor{ width: 1188px; margin-left:15%; } .floor-1{ margin-top: 100px; padding-bottom: 5px; border-bottom: 1px solid red; } .floor-1 span{ float: right; margin: 0 10px; } .floor-jt{ background-image: url('floor-arrow.png'); background-repeat: no-repeat; background-attachment: fixed; background-position: 50% 50%; } 老师为什么我设置过后没有任何显示啊，图片路径没错

2018-01-24 15:47:21