Question

所以我试图使用css过渡来改变背景图像，我有一个问题，即img没有这种方式响应任何人都可以帮我提出一个100％高度和宽度的方法吗？

.container{
  width:100%;
  height:600px;

}

.container img, .top{
    max-width:100%;
  max-height:100%;
}

.top{
  width:100%;
    height:300px;
   -webkit-transition: background-image 0.5s;
    display:block;
}

.top:before{
  content: "";
  background-image:url(https://sc02.alicdn.com/kf/HTB1ZRbgIVXXXXXTXXXXq6xXFXXX9/600-x-600-mm-egyptian-tile-keramik.jpg);
    background-repeat: no-repeat;
    background-size: contain;
   -webkit-transition: background 0.5s;
    width: 100%;
    height: 100%;
  display:block;
}

.container:hover .top:before {
    content: "";
    background-image: url(http://www.jokopost.com/wp-content/uploads/2015/09/%D7%90%D7%99%D7%A7%D7%A1-commons.wikimedia.org_.png);
    -webkit-transition: background 1s;
    width: 100%;
    height: 100%;
    display: block;
}


<div class="container">
<div class="top">
</div>
</div>

https://jsfiddle.net/7ejtydts/2/

Answer 1

使用＆＃34; background-size：contains;＆＃34;将使图像响应，但它不会超出其尺寸。因此，您发布的示例是响应式的，但前提是您将容器缩小。

使用＆＃34;背景大小：封面;＆＃34;将使图像拉伸到容器的大小。这样做的缺点是，如果容器的比例不同，它会切掉图像的边缘。

在这里查看我的更新小提琴：

.container{
  width:600px;
  height:600px;

}

.container img, .top{
    max-width:100%;
  max-height:100%;
}

.top{
  width:600px;
    height:400px;
   -webkit-transition: background-image 0.5s;
    display:block;
}

.top:before{
  content: "";
  background-image:url(https://sc02.alicdn.com/kf/HTB1ZRbgIVXXXXXTXXXXq6xXFXXX9/600-x-600-mm-egyptian-tile-keramik.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  background-position: center;
   -webkit-transition: background 0.5s;
    width: 100%;
    height: 100%;
  display:block;
}

.container:hover .top:before {
    content: "";
    background-image: url(http://www.jokopost.com/wp-content/uploads/2015/09/%D7%90%D7%99%D7%A7%D7%A1-commons.wikimedia.org_.png);
    -webkit-transition: background 1s;
    width: 100%;
    height: 100%;
    display: block;
}

https://jsfiddle.net/7ejtydts/3/

Answer 2

尝试使用此代码，它会调整图像的响应性。

.top::before {
    background-image: url("https://sc02.alicdn.com/kf/HTB1ZRbgIVXXXXXTXXXXq6xXFXXX9/600-x-600-mm-egyptian-tile-keramik.jpg");
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.top {
    display: block;
    height: 600px;
    position: relative;
    width: 100%;
}

更改背景图像没有响应

2 个答案: