Question

我试图将我的图片放在菜单的第一个a标记中。基本上我想要的是图像完全适合菜单的第一个a标签而不显示任何填充。我是html和css的新手。可以在

查看代码的输出

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_topnav

代码：

＆＃13;

                    .menu {
                              margin: 0;
                              font-family: Arial, Helvetica, sans-serif;
                    }


                    .topnav {
                              overflow: hidden;
                              background-color: #D4D4D4;
                    }


                    .topnav a {
                              float: left;
                              color: black;
                              text-align: center;
                              padding: 14px 16px;
                              text-decoration: none;
                              font-size: 17px;
                    }


                    .topnav a:hover {
                              background-color: #6F8CFE;
                              color: #EEEEEE;
                    }


                    .topnav a.active {
                              background-color: #4CAF50;
                              color: white;
                    }

＆＃13;

<body>

<div class ="menu">

        <div class="topnav">
                  <a class ="active" href="#home"><img src ="http://www.vectortemplates.com/raster/batman-logo-big.gif" height="15" width="30"/></a>
                  <a href="#news">News</a>
                  <a href="#contact">Contact</a>
                  <a href="#about">About</a>
        </div>

        <div style="padding-left:16px">
                  <h2>Top Navigation Example</h2>
                  <p>Some content..</p>
        </div>
</div>

</body>

＆＃13;

Answer 1

我将图片添加为background-image，然后为a代码添加了width，以便无需填充即可适合图片。

此图片也不是png，因此您无法在a标记上看到背景颜色。

这是我的代码：

.menu {
                              margin: 0;
                              font-family: Arial, Helvetica, sans-serif;
                    }


                    .topnav {
                              overflow: hidden;
                              background-color: #D4D4D4;
                    }


                    .topnav a {
                              float: left;
                              color: black;
                              text-align: center;
                              padding: 14px 16px;
                              text-decoration: none;
                              font-size: 17px;
                    }


                    .topnav a:hover {
                              background-color: #6F8CFE;
                              color: #EEEEEE;
                    }


                    .topnav a.active {
                              background-color: #4CAF50;
                              color: white;
                    }
                    
                    
                   .topnav a:first-child {
                        background-image: url(http://www.vectortemplates.com/raster/batman-logo-big.gif);
                        background-size: cover;
                        background-repeat: no-repeat;
                        width: 48px;
                    }

<body>

<div class ="menu">

        <div class="topnav">
                  <a class ="active" href="#home">&nbsp;</a>
                  <a href="#news">News</a>
                  <a href="#contact">Contact</a>
                  <a href="#about">About</a>
        </div>

        <div style="padding-left:16px">
                  <h2>Top Navigation Example</h2>
                  <p>Some content..</p>
        </div>
</div>

</body>

Answer 2

检查一下。

＆＃13;

.menu {
                              margin: 0;
                              font-family: Arial, Helvetica, sans-serif;
                    }


                    .topnav {
                              overflow: hidden;
                              background-color: #D4D4D4;
                    }


                    .topnav a {
                              float: left;
                              color: black;
                              text-align: center;
                              padding: 14px 16px;
                              text-decoration: none;
                              font-size: 17px;
                    }


                    .topnav a:hover {
                              background-color: #6F8CFE;
                              color: #EEEEEE;
                    }


                    .topnav a.active {
                              background-color: #4CAF50;
                              color: white;
                    }
                    
                    .topnav a:first-child {
                      padding: 0px;
                    }
                    .topnav a img {
                      display: block;
    max-width: 100%;

                    }

＆＃13;

<div class ="menu">

                    <div class="topnav">

                              <a class ="active" href="#home"><img src ="http://www.vectortemplates.com/raster/batman-logo-big.gif" height="48"/></a>

                              <a href="#news">News</a>

                              <a href="#contact">Contact</a>

                              <a href="#about">About</a>

                    </div>


                    <div style="padding-left:16px">

                              <h2>Top Navigation Example</h2>

                              <p>Some content..</p>

                    </div>

            </div>

＆＃13;

Answer 3

＆＃13;

.menu {
                              margin: 0;
                              font-family: Arial, Helvetica, sans-serif;
                    }


                    .topnav {
                              overflow: hidden;
                              background-color: #D4D4D4;
                    }


                    .topnav a {
                              float: left;
                              color: black;
                              text-align: center;
                              padding: 14px 16px;
                              text-decoration: none;
                              font-size: 17px;
                    }


                    .topnav a:hover {
                              background-color: #6F8CFE;
                              color: #EEEEEE;
                    }


                    .active {
                              background-color: #ffffff;
                    }

＆＃13;

<body>

<div class ="menu">

        <div class="topnav">
                 <a class ="active" href="#home" style="padding:0;"><img src ="http://www.vectortemplates.com/raster/batman-logo-big.gif" style="width:62px;" /></a>
                  <a href="#news">News</a>
                  <a href="#contact">Contact</a>
                  <a href="#about">About</a>
        </div>

        <div style="padding-left:16px">
                  <h2>Top Navigation Example</h2>
                  <p>Some content..</p>
        </div>
</div>

</body>

＆＃13;

如何在菜单中显示图像

3 个答案: