изменение фонового изображения не реагирует

, так что я пытаюсь изменить фоновое изображение с использованием перехода 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

Ok спасибо много я постараюсь найти другое решение – 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

изменение фонового изображения не реагирует

ответ

Смежные вопросы