Question

我正在尝试制作一个链接到我网站的图片按钮。链接工作正常，但我的形象出现错误。

.dugme {
  background-image: url("logo.png");
  position: absolute;
  top: 200px;
  right: 100px;
  width: 40px;
  height: 40px;
}

<body>
  <a href="strana1.html"><button type="submit" class="dugme"></button></a>
</body>

这是预期的输出：

这是输出：

谢谢！

Answer 1

看起来您的徽标太大了按钮。只需尝试使用background-size: contain调整图片大小以使其适合您的按钮。

包含：调整背景图像的大小以确保图像完全可见

CSS background-size Property

＆＃13;

.dugme {
    background-image: url("https://i.stack.imgur.com/gUvD1.png");
    background-size: 165%;
    background-position: 45% 53%;
    position: absolute;
    top: 200px;
    right: 100px;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    border: 1px solid gray;
}

＆＃13;

<body>
  <a href="strana1.html"><button type="submit" class="dugme"></button></a>
</body>

＆＃13;

Answer 2

使用以下CSS代码并分享您的评论

       .dugme{
        border-radius:100%;
        background-image: url("logo.png");
        background-color:transparent;
        background-size:cover;
        background-position:center;
        border-width:0px;
        outline:none;
        width: 40px;
        height: 40px;
        }

Answer 3

试试这个

＆＃13;

.dugme {
    background: url("https://i.stack.imgur.com/gUvD1.png") no-repeat center center;
    background-size: contain;
    position: absolute;
    top: 200px;
    right: 100px;
    width: 40px;
    height: 40px;
}

＆＃13;

<body>
  <a href="strana1.html"><button type="submit" class="dugme"></button></a>
</body>

＆＃13;

要使背景包含在按钮内，背景图像不重复

CSS图像按钮链接调整大小

3 个答案: