如何解决使用CSS在HTML中相对于屏幕分辨率调整按钮背景图像的大小
我有一个以图像为背景的按钮,我想根据屏幕分辨率调整图像尺寸。对于图像,我使用width:100%,但是在这种情况下,如果将其用于按钮,则按钮的大小将调整为屏幕分辨率,但不会调整为背景的图像。我该怎么做,以与按钮相同的方式调整图像大小?
<!DOCTYPE html>
<html>
<body>
<button class="dog"><img src="pictures/dog.png" ></button>
<style>
.dog {
position:absolute;
width:100%;
left:1%;
top:6%;
}
</style>
</body>
</html>
解决方法
您可以删除<button>
元素内的图像,并将图像设置为按钮的背景。使用background-size
之类的CSS背景属性来使背景自动适合您的按钮。
.bill {
width: 180px;
height: 80px;
background: url("https://www.fillmurray.com/640/360");
background-position: center;
background-size: cover;
color: floralwhite;
font-weight: bold;
font-size: 1.4em;
}
<button class="bill">Bill Me!</button>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。