web-dev-qa-db-ja.com

Firefox -moz-border-radiusは画像を切り取りませんか？

画像の境界線の半径が設定されている場合、Firefoxで角を切り取る方法を知っていますか？含まれている要素は正常に動作しますが、Iい角が突き出ています。

画像を背景画像として設定したり、サイトに配置する前に処理したりせずにこれを修正する方法はありますか？

cssfirefoxcss3
49
dougoftheabaci

img要素に境界線の半径を直接適用すると、トリミングされませんか？ 含まれるコンテンツに関する限り、-moz-border-radiusの既知の問題 です。

-編集

OK、imgも切り取りません。画像が無地の背景にあるpng/gifのようなものである場合、次のようなことができます。

img {
    border: 10px solid white;
    -moz-border-radius: 10px;
}

ただし、写真の角を丸くしようとしている場合、3.5では機能しません。

19
robertc

回避策：画像をコンテナ要素の背景として設定し、その要素に境界線の半径を追加します。

21
Alex

私は答えがあると思うが、私の英語は申し訳ありません...私は画像の上に境界線と背景色のない別のdivを置くという質問を解決しました。

#imageContainer {
  -webkit-border-radius:10px
  -moz-border-radius:10px;
  z-index:1;
}
#borderContainer {
  position:absolute;
  border:1px solid #FFFFFF;
  -webkit-border-radius:10px
  -moz-border-radius:10px;
   z-index:10;
}
3
Max
.round_image_borders {

    position:relative; // fix for IE8(others not tested)
    z-index:1; // fix for IE8(others not tested)
    width:114px;
    height:114px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    behavior:url(border-radius.htc); // fix for IE8(others not tested)
}

このリンクから「border-radius.htc」スクリプトを入手しました。

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

IE8のラウンドコーナーのサポートが追加されます。また、position：relativeおよびz-indexを設定する必要がありました。そうしないと、div（および背景画像）がcontainer（round_image_borders）divが配置された目的のdivコンテナの下に表示されるためです。

これは以下に対して機能します：

FF 3.6.16

IE 8

Chrome 12.0

はい、画像はクラスround_image_bordersのdivと同じサイズでなければなりません。ただし、この回避策は、すべて同じサイズの画像で使用することを目的としています。

1
Erik Čerpnjak
img {
 overflow: hidden;

 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -o-border-radius: 10px;
 -ms-border-radius: 10px;
 border-radius: 10px;
}
1
insign

Overflow：hiddenを使用すると、画像の角が突き出た状態で表示されません。

誰が知っている、彼らはまだそこにあるかもしれない、ただ隠されている。

1
Christian

-moz-border-radiusを使用してFireFoxで画像を直接丸める方法はないと思います。しかし、余分なマークアップを使用して、丸い角を昔ながらの方法でシミュレートできます。

次のようになります。

<div id="container">
  <img src="images/fubar.jpg" alt="situation normal" />
  <div class="rounded lt"></div>
  <div class="rounded rt"></div>
  <div class="rounded lb"></div>
  <div class="rounded rb"></div>
</div>

次に、CSS：

#container {position:relative;}
#container img {z-index:0;}
.rounded {position:absolute; z-index:1; width:20px; height:20px;}
.lt {background:url('images/rounded_LT.png') left top no-repeat;}
.rt {background:url('images/rounded_RT.png') right top no-repeat;}
.lb {background:url('images/rounded_LB.png') left bottom no-repeat;}
.rb {background:url('images/rounded_RB.png') right bottom no-repeat;}

角の背景画像は三日月のように見え、透明度があります。これはネガティブスペーステクニックであり、隅に透明部分がある場所を通して画像を表示できます。

PNG-24背景を持つDivコーナーは非常にうまく機能します。ぎざぎざに対処できる場合は、IE6のGIF背景を使用するか、正方形の角の背景画像を完全に削除することができます。条件付きコメントを使用して、CSSをIE6に提供します。

1
fisherwebdev

回避策：画像をコンテナ要素の背景として設定し、その要素に境界線の半径を追加します。

これは、画像がdivとまったく同じサイズでない限り機能しません。背景画像のサイズ変更を可能にするfirefox 3.6の新しいcssプロパティを使用する場合を除き、3.6には既にほとんど誰もいません。

だから私はアレックスに同意します、それはあなたが画像をdiv /他のエルムのサイズにする場合です。

1
Dale Larsen

Firefoxは背景画像をクリップするように見えるので、h1の背景画像を設定し、それに境界線半径を適用すると、クリップされます。 （FF 3.6.12で検証済み）

0
Dave Rau