it-swarm.com.de

Firefox -moz-border-radius wird das Bild nicht beschneiden?

Kennt jemand eine Möglichkeit, Firefox dazu zu bringen, die Ecken zuzuschneiden, wenn der Randradius eines Bildes festgelegt ist? Das Element wird gut funktionieren, aber ich bekomme hässliche Ecken. 

Wie kann ich das beheben, ohne das Bild als Hintergrundbild festzulegen oder zu bearbeiten, bevor ich es auf meiner Website platziere?

49
dougoftheabaci

Wird nicht zugeschnitten, wenn Sie den Randradius direkt auf das Element img anwenden? Es gibt bekannte Probleme mit -moz-border-radius, soweit es sich um enthaltene Inhalte handelt .

--bearbeiten

OK, es wird auch nicht img zugeschnitten. Wenn es sich bei Ihrem Bild um eine Art png/gif auf festem Hintergrund handelt, können Sie Folgendes tun:

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

Wenn Sie jedoch versuchen, abgerundete Ecken für ein Foto zu erhalten, wird es in 3.5 nicht funktionieren.

19
robertc

Problemumgehung: Legen Sie das Bild als Hintergrund eines Containerelements fest und fügen Sie dem Element dann einen Randradius hinzu. 

21
Alex

Ich denke, die Antwort zu haben, aber ich entschuldige mich für mein Englisch ....__ Ich löste die Frage, die ein anderes div mit Rand und keine Hintergrundfarbe über das Bild setzt.

#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)
}

Ich habe das Skript "border-radius.htc" von diesem Link erhalten:

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

Was es tut, fügt Unterstützung für runde Ecken für IE8 hinzu. Ich musste auch position: relative und z-index setzen, da ansonsten das div (und das Hintergrundbild) unter dem gewünschten div-Container angezeigt würde, in den der container (round_image_borders) div gestellt wurde.

Das funktioniert für:

3,6,16 FF

IE 8

Chrome 12.0

Und ja, das Bild muss die gleiche Größe haben wie das div mit der Klasse round_image_borders. Diese Problemumgehung ist jedoch für Bilder gedacht, die alle dieselbe Größe haben.

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

Wenn Sie Überlauf verwenden: ausgeblendet, werden die Bildecken nicht hervorgehoben.

Wer weiß, vielleicht sind sie noch da, nur versteckt.

1
Christian

Ich glaube nicht, dass es eine Möglichkeit gibt, -moz-border-radius zu verwenden, um ein Bild in FireFox direkt abzurunden. Sie können die abgerundeten Ecken jedoch auf altmodische Weise mit zusätzlichem Markup simulieren.

Das sieht also so aus:

<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>

Dann das 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;}

Die Hintergrundbilder der Ecken wirken wie ein Halbmond mit Transparenz. Dies ist eine negative Raumtechnik, bei der das Bild durch die Transparenz der Ecken sichtbar wird.

Div-Ecken mit PNG-24-Hintergründen funktionieren sehr gut. Wenn Sie mit der Unschärfe umgehen können, können Sie GIF-Hintergründe für IE6 verwenden oder das Hintergrundbild ganz für rechteckige Ecken entfernen. Verwenden Sie bedingte Kommentare, um das CSS an den IE6 zu übergeben.

1
fisherwebdev

Problemumgehung: Legen Sie das Bild als .__ fest. Hintergrund eines Containerelements, Fügen Sie dann den Randradius auf .__ hinzu. Element.

Dies funktioniert nur, wenn das Bild genau die gleiche Größe wie das div hat. Es sei denn, Sie verwenden die neue css-Eigenschaft in Firefox 3.6, die die Bildgröße für das Hintergrundbild zulässt, aber kaum jemand auf 3.6.

Also stimme ich Alex zu, wenn du das Bild so groß machst wie der div/andere Elm.

1
Dale Larsen

Firefox scheint ein Hintergrundbild zu beschneiden. Wenn Sie also ein h1-Hintergrundbild festlegen und den Randradius anwenden, wird es abgeschnitten. (gerade verifiziert in FF 3.6.12)

0
Dave Rau