通常の状態とホバー状態の両方を含む背景画像を持つ div があるので、マウスオーバーすると背景画像の下半分が表示されます。同じサイトのモバイル版を作っているのですが、同じdivの高さが大きくなるので、画像の前半だけを表示したいです。ただ、現状だとdivが大きくなると明らかに背景画像の後半が見えてしまいます。背景画像の上半分を表示しながら下半分を非表示にする方法について何か考えはありますか?
.community a{background: url(images/migtea.jpg) 0 0 no-repeat #FFF; display:block; float:left; margin:0 10px 10px 0; padding: 10px 10px 10px 151px;}
.community a:hover{background-position: 0 -131px;}
唯一の問題は、「clip-path」、「mask」、および「filter」(IE「filter」ではなく、SVG「filter」) が Firefox と Safari (はい、Chrome ではありません) でのみ機能することです。そして、彼らはそれを異なって行います。Firefox では、ID を介して指定された svg クリップパスが必要です。
.box { clip-path: url("roundedrect.svg#cp1"); }一方、Safari は形状自体を使用してクリップパスを作成します。
.box { clip-path: url("roundedrect.svg"); }Opera と Chrome でそれを行う方法をまだ発見していません。
しかし、FF と Safari の「クロス ブラウザ」の例については、http: //tokimon.dk/testing/css-svg-test.htmlを作成しました。
それ以外の場合は、CSS 3 の背景操作から何かを得ることができます: http://www.css3.info/preview/
それ以外の場合は、背景画像を分離するか、その上に無地の背景を持つコンテナー (div) を配置して、非表示にする部分を「非表示」にするだけです (ただし、これは非常にエレガントなソリューションではありません)。
お役に立てれば！