3

私の Web サイトには、角が丸い長方形のボタンのリストとして表示されるナビゲーションがあります。

各ボタンには、写真である独自のカスタム背景が必要です。写真はボタンよりも大きく、このボタン上でのマウスの移動に反応して移動する必要があります。窓越しに見ているような効果があります。

ナビゲーションの HTML 構造は、"ul > li > a > img" です。

各「ul > li」は、角が丸い長方形で、画像のクリッピング マスクとして機能する必要があると思います。

「overflow: hidden;」の設定 クリッピング領域は角が丸い単純な長方形であるため、機能しません。

以下のような CSS プロパティは、Webkit ブラウザーでは機能しますが、Firefox では機能しません。

mask-image: url(/images/mask.png);
mask-position: 0 0;
mask-repeat: no-repeat no-repeat;
mask-size: 125pt 77pt;

それを行うクロスブラウザの方法は何ですか?

4

2 に答える 2

6

これを行う最善の方法は、overflow:hidden を使用することです。

「div/li」ボタン内にあるものはすべて、ボタンの寸法にクリップされます。丸い角でうまく機能します。

例 (div の例)( 黄色のボックスは 400 x 400 の画像、赤いボックスは 200 x 200 ..example = chrome/-webkit-) 

 <html>

<style>
.box{width:200px; height:200px; background:red;overflow:hidden;border-radius:30px;}
.image {width:400px; height:400px; background:yellow;}



</style>



<div class="box">
<div class="image">
Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image 
</div>



</div>
</html>

(申し訳ありません...私は新しいです...シンボルを変換する何らかの方法があると思いました、私の悪い)

于 2011-02-16T09:54:53.897 に答える
1

それぞれli divに幅と高さを指定し、CSSを使用してbackground配置された画像を適用し、background-positionこれを丸みを帯びた角に使用できます。

behavior: url("border-radius.htc");
-moz-border-radius: 20px; /* Firefox */
-webkit-border-radius: 20px; /* Safari and Chrome */
-khtml-border-radius: 20px; /* Linux browsers */
border-radius: 20px; /* Opera 10.50, IE and CSS3 */

そして、IEサポートのためにこのHTCファイルを含めてください：

http://code.google.com/p/curved-corner/

于 2011-02-15T19:03:45.680 に答える