Изменение прозрачного фонового изображения при наведении на цвет фона

Question

У меня был поиск здесь и, похоже, не найти никому нить, занимающуюся проблемой, которую я имею. Если я пропустил что-то, хотя прошу прощения!

Я выполняю работу для клиента, который хочет, чтобы логотип изменялся при зависании, причем цвет фона должен быть назначен при наведении в одно и то же время. Логотип частично прозрачный, поэтому цвет фона предназначен для отображения через логотип.

У меня есть что-то работающее, но я получаю раздражающий результат, при котором на первом курсоре цвет фона появляется, чтобы покрыть все изображение как цветной квадрат. Последующие зависания работают по назначению.

Это заставило меня задаться вопросом, была ли проблема связана с задержкой на сервере, предоставляющем изображения. Я пробовал предварительно загружать их, но не повезло.

У меня есть прототип в Кодепене, исходный код ниже! http://codepen.io/JD1990/pen/mPagaz

HTML

<div class="test"> 
    <img src="http://dummyimage.com/318x318/ffffff/ffffff.png"> 
</div> 

CSS

#preload-01 { 
    background: url(http://new-site-jd-5-5-16.new-site-fa.appspot.com/static/content/client-logo-bbc-inverse.png) no-repeat -9999px -9999px; 
} 

.test { 
    display: inline-block; 
    position: relative; 
} 
.test:after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background-color: rgba(0,0,0,0); 
    background-image: url(http://new-site-jd-5-5-16.new-site- fa.appspot.com/static/content/client-logo-bbc-inverse.png); 
    background-image: url(http://new-site-jd-5-5-16.new-site-fa.appspot.com/static/content/client-logo-bbc.png); 
} 

.test:hover:after { 
    background-image: url(http://new-site-jd-5-5-16.new-site-fa.appspot.com/static/content/client-logo-bbc-inverse.png); 
    background-color: black; 
} 

Очень благодарен за любые подсказки, я все еще довольно неопытны с помощью CSS так что спасибо заранее :)

Answer 1

Я не уверен, что я получил вопрос правильно, это то, что вы собираетесь? Если вы измените URL-адрес на фоновое изображение, оно будет загружать изображение только тогда, когда оно зависает, а его в html заставит браузер сразу загрузить его. Еще лучшим вариантом было бы разместить эти изображения один рядом с другим в фотошопе и объединить их в спрайт, а затем при наведении вы просто измените положение фона, чтобы показать одно или другое.

body { 
 
    background-color: #BADA55; 
 
} 
 
.test { 
 
    position: relative; 
 
} 
 

 
.wt { 
 
    background-color: white; 
 
} 
 

 
.blk { 
 
    background: black; 
 
    display: none; 
 
} 
 

 
img { 
 
    position: absolute; 
 
} 
 

 
.test:hover img { 
 
    display: none; 
 
} 
 

 
.test:hover .blk { 
 
    display: block; 
 
}

<div class="test"> 
 
    <img class="wt" src="http://new-site-jd-5-5-16.new-site-fa.appspot.com/static/content/client-logo-bbc.png"> 
 
    <img class="blk" src="http://new-site-jd-5-5-16.new-site-fa.appspot.com/static/content/client-logo-bbc-inverse.png" alt="" /> 
 
</div>

Answer 2

Добавлено очень быстрый переход на цвет фона и удалил исходный цвет фона, поскольку это не было необходимо.

Кроме того, так как изображение не меняется, я удалил его из правила :hover, так как он не требовался. Я думаю, это могло быть проблемой.

body { 
 
    background: pink; 
 
} 
 
.test { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.test:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-image: url(http://new-site-jd-5-5-16.new-site-fa.appspot.com/static/content/client-logo-bbc.png); 
 
    transition: background-color 0.1s ease; 
 
} 
 
.test:hover:before { 
 
    background-color: #000; 
 
}

<div class="test"> 
 
    <img src="http://dummyimage.com/318x318/ffffff/ffffff.png"> 
 
</div>