gpt4 book ai didi

html - CSS 图像按钮链接调整大小

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

我正在尝试制作一个链接到我网站的图像按钮。链接运行良好,但我的图像显示错误。

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

这是预期的输出:

expected

这是输出:

result

谢谢!

最佳答案

看起来您的 Logo 对于按钮来说太大了。只需尝试使用 background-size: contain 调整图像大小以适合您的按钮。

Contain: Resize the background image to make sure the image is fully visible

.dugme {
background-image: url("/image/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;
}
<body>
<a href="strana1.html"><button type="submit" class="dugme"></button></a>
</body>

关于html - CSS 图像按钮链接调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48004989/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com