3

私はjqueryプラグインに取り組んでいます。画像にマスク効果を加える必要があります。FFではすべてうまくいきますが、ChromeとOperaでは機能しません。

ここにhtml構造があります

<div id="container">
    <img src="http://lorempixel.com/300/200" />
</div>

とcss

#container, #container img { border-radius: 150em;}  
#container img:hover {opacity: 0.5; }
#container {
     overflow: hidden;
     background: #000;
     width: 200px;
     height: 200px;
}

彼はjsfiddleですhttp://jsfiddle.net/geedmo/qQUfA/

Chromeはホバーするまでは問題ないように見えますが、Operaは非常にうまく機能しません。とにかく、html構造を変更せずにマスク効果を達成することはできますか？

更新：画像をトリミングする必要があります

前もって感謝します。

4

1 に答える 1

2

正常に動作するようです: http://jsfiddle.net/qQUfA/4/画像の高さと幅を追加する必要がありました:

#container img {
    width: 100%;
    height: 100%;
}
于 2012-10-29T18:25:32.683 に答える