背景色の前にホバーの透明な背景イメージを変更する

Question

私はここで検索しているので、私が持っている問題に対処する誰かのスレッドを見つけることができないようです。私は謝罪するが、何かを逃した場合！

ロバスト状態でロゴを変更し、同時にホバーに割り当てられる背景色を使用するクライアントで作業をしています。ロゴは部分的に透明なので、背景色はロゴを通して表示されます。

私は何か問題はありますが、最初のマウスオーバー時に背景色が画像全体を色付きの四角で覆うように見えるという厄介な結果に陥ります。その後のホバーは、意図したとおりに動作します。

これは、画像を提供するサーバーで問題が発生したのかどうか疑問に思いました。私はそれらをプリロードしようとしましたが運がありません。

私は以下のソースコードのCodepenでプロトタイプを手に入れました！任意のヒントのために非常に感謝して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に置くとすぐにブラウザに読み込まれます。もっと良い選択肢は、それらの画像をPhotoshopで並べてスプライトに合成し、ホバー上でバックグラウンド位置を変更してどちらか一方を表示することです。

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>