改变背景图像没有反应

所以我想改变背景图像使用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/

来源

2016-09-20 ssabin

使用 “背景尺寸：含有;”会使图像响应，但不会超出其尺寸。所以你发布的例子是响应式的，但只有当你减小容器时。

使用“background-size：cover;”将使图像伸展到容器的大小。这有一个缺点，如果容器的比例不一样，它会将图像的边缘切掉。

看一看我的更新小提琴这里：

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

来源

2016-09-20 13:52:30

好非常感谢，我会尝试寻找另一种解决方案 – ssabin

你可以看看使用的真实图像，而不是背景图片，或者您也可以使用背景图片，但要确保容器具有固定的宽/高比。或者，你可以使用边缘周围有足够空间的背景图像，这样你就可以减少位数，并且看起来没什么不同。 –

试试这个代码，它将调整图像的响应速度。

.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%; 
}

来源

2016-09-21 08:09:22 SaurabhLP

改变背景图像没有反应

回答

相关问题