个人中心
gpt4 book ai didi

html - 如何在菜单中适合图像

转载 作者：太空宇宙 更新时间：2023-11-04 01:20:51 25 4
gpt4 key购买 nike

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

查看代码的输出

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

代码:

                    .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;
                    }
<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>

最佳答案

我将图像添加为 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>

关于html - 如何在菜单中适合图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49146360/

25 4 0
文章推荐： javascript - 上传到服务器时，笔 (codepen) 不工作
文章推荐： JavaScript/NodeJs - 类型错误 : Cannot set property 'validation' of undefined
文章推荐： javascript - React Native 导航子级父级
文章推荐： html - 如何修复设计