Question

首先是图片

enter image description here

图片长200像素，高50像素。如果我将鼠标悬停在图像上，则应将宽度更改为300px并具有过渡效果。目前，如果我将图像缩放到高度和高度。宽度新，不仅宽度。我怎么能改变它？

这是jsfiddle +代码

＆＃13;

*{
    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;
}

＆＃13;

<html>
    <head>
        <link href='index.css' rel='stylesheet' type='text/css'>


    </head>
    
    <body>
        
        <div class="eins">
        </div>
    
    
    </body>
</html>

＆＃13;

Answer 1

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

＆＃13;

* {
  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;
}

＆＃13;

<html>
<head>
  <link href='index.css' rel='stylesheet' type='text/css'>
</head>
<body>
  <div class="eins">
  </div>
</body>
</html>

＆＃13;

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

1 个答案: