html – 如何在不弄乱整个内容的情况下在背景网址徽标的侧面插入小图标？

2023年4月28日 190次阅读

作为问题,如何在页面中心的同一块背景网址的右侧插入小图标,而不会弄乱徽标的位置(背景网址)？我希望徽标保留在页面右侧的社交媒体中间和图标上.

.logo{
        display: block;
        text-indent: -10000px;
        background: url("http://i.imgur.com/No5YAp7.jpg") no-repeat center center;
        background-size: 200px;
        width: 200px;
        height: 80px;
        margin: 30px auto;
    }

    #social{
        float: right;
    }

    #social ul{
        list-style: none;
    }

    #social ul li{
        display: inline-block;
        text-indent: -10000px;
        margin-top: 40px;
    }

    .facebook{
        display: block;
        background: url("http://i.imgur.com/y6Y9QIs.png") no-repeat center;
        background-size: 40%;
        width: 60px;
        height: 60px;
    }

    .instagram{
        display: block;
        text-indent: -10000px;
        background: url("http://i.imgur.com/aaDQFZ6.png") no-repeat center;
        background-size: 50%;
        width: 60px;
        height: 60px;
        margin-right: 30px;
    }
  <h1 class="logo">abc</h1>
            
    <div id="social">
    <ul>
    <li><a href="" title="facebook" class="facebook">Facebook</a></li>
    <li><a href="" title="instagram" class="instagram">Instagram</a></li>
    </ul>
    </div>

最佳答案 只需重新排序您的HTML,以便社交是第一位的.

.logo{
        display: block;
        text-indent: -10000px;
        background: url("http://i.imgur.com/No5YAp7.jpg") no-repeat center center;
        background-size: 200px;
        width: 200px;
        height: 80px;
        margin: 30px auto;
    }

    #social{
        float: right;
    }

    #social ul{
        list-style: none;
    }

    #social ul li{
        display: inline-block;
        text-indent: -10000px;
        margin-top: 40px;
    }

    .facebook{
        display: block;
        background: url("http://i.imgur.com/y6Y9QIs.png") no-repeat center;
        background-size: 40%;
        width: 60px;
        height: 60px;
    }

    .instagram{
        display: block;
        text-indent: -10000px;
        background: url("http://i.imgur.com/aaDQFZ6.png") no-repeat center;
        background-size: 50%;
        width: 60px;
        height: 60px;
        margin-right: 30px;
    }
<div id="social">
  <ul>
    <li><a href="" title="facebook" class="facebook">Facebook</a></li>
    <li><a href="" title="instagram" class="instagram">Instagram</a></li>
  </ul>
</div>
<h1 class="logo">abc</h1>
点赞