gpt4 book ai didi

html - 过渡背景图像宽度但保持高度

转载 作者:行者123 更新时间:2023-11-28 10:45:40 25 4
gpt4 key购买 nike

先上图

enter image description here

图片长200px,高50px。如果我将鼠标悬停在图像上,宽度应该更改为 300px 并带有过渡效果。目前,如果我将图像悬停在新的高度和宽度上,而不仅仅是宽度。我该如何改变它?

这里是jsfiddle +代码

*{
margin: 0px;
padding: 0px;
}

.eins{
background-image: url(http://img3.fotos-hochladen.net/thumbnail/einse402yr1bzf_thumb.jpg);
background-size: 100%;
height: 50px;
width: 200px;
transition: all 0.5s;
}

.eins:hover{
width: 300px;
}
<html>
<head>
<link href='index.css' rel='stylesheet' type='text/css'>


</head>

<body>

<div class="eins">
</div>


</body>
</html>

最佳答案

您需要 background-size: 100% 100% 而不是 background-size: 100%

* {
margin: 0px;
padding: 0px;
}
.eins {
background-image: url(http://img3.fotos-hochladen.net/thumbnail/einse402yr1bzf_thumb.jpg);
background-size: 100% 100%;
height: 50px;
width: 200px;
transition: all 0.5s;
}
.eins:hover {
width: 300px;
}
<html>
<head>
<link href='index.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="eins">
</div>
</body>
</html>

关于html - 过渡背景图像宽度但保持高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28131126/

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