6

スライドアニメーションオプションを使用して、舷窓ウィンドウをフレックススライダーで表示しようとしています。基本的に、画像はスライドしますが、円でマスクされます。これを、フレックススライダーラッパーに非表示のborder-radiusとoverflow:hidで実現しようとしています。

Firefoxでこのページをチェックして、目的の結果を確認し、そこで機能させます。次に、ChromeまたはSafariにないことを確認します。リンクは次のとおりです(スライドショーは私の写真です):http: //imjoeybrennan.com/about.html

どんな助けでも大歓迎です!ありがとう、ジョーイ

4

1 に答える 1

10

問題を解決するのに役立ちました。これも簡単です。chromeまたはsafari(webkit)で機能しない理由は、overflow-hidden +positionrelativeおよびborderradiusを使用する場合にwebkitに既知のバグがあるためです。簡単な修正は、同じ要素にsvgwebkitマスクを追加することです。

.joey_pic .flexslider {
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
overflow: hidden;
}

これによりエッジがギザギザになる可能性もあるため、別の可能な解決策は、フレックススライダー内の画像に境界線の半径を設定することです:(これは、ホバートランジションを使用して下の画像で行っていることです)

.flexslider .slides img {
max-width: 100%;
display: block;
border-radius: 100px;
}

お役に立てれば

于 2012-11-20T16:07:32.033 に答える