web-dev-qa-db-fra.com

Firefox -moz-border-radius ne sera pas recadrer l'image?

Est-ce que quelqu'un connaît un moyen de faire en sorte que Firefox coupe les coins si le rayon de la bordure d'une image est défini? Son élément contenant fonctionnera très bien, mais je vais avoir des coins laids qui ressortent. 

Est-il possible de résoudre ce problème sans définir l'image en tant qu'image d'arrière-plan ou la traiter avant de la placer sur mon site?

cssfirefoxcss3
49
dougoftheabaci

Ne recadrez-vous pas si vous appliquez le rayon de la bordure directement à l'élément img? Il existe des problèmes connus liés à -moz-border-radius en ce qui concerne le contenu contenu .

--modifier

OK, il ne recadre pas img non plus. Si votre image est une sorte de png/gif sur un arrière-plan solide, vous pourrez peut-être faire quelque chose comme ceci:

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

Mais si vous essayez d'obtenir des angles arrondis sur une photo, cela ne fonctionnera pas dans la version 3.5.

19
robertc

Solution de contournement: définissez l'image comme arrière-plan d'un élément conteneur, puis ajoutez un rayon de bordure à cet élément. 

21
Alex

Je pense avoir la réponse mais désolé pour mon anglais .... J'ai résolu la question en mettant une autre div avec une bordure et aucune couleur de fond sur l'image.

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

J'ai eu le script "border-radius.htc" à partir de ce lien:

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

Ce qu'il fait ajoute un support pour les coins arrondis pour IE8. Je devais également définir position: relative et z-index, car sinon la div (et l'image d'arrière-plan) s'afficheraient sous le conteneur div souhaité dans lequel le conteneur (round_image_borders) div a été placé.

Cela fonctionne pour:

FF 3.6.16

IE 8

Chrome 12.0

Et oui, l'image doit avoir la même taille que la div avec la classe round_image_borders. Mais cette solution de contournement est destinée à être utilisée avec des images ayant toutes la même taille.

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

Si vous utilisez débordement: masqué, les coins de l'image ne seront pas affichés.

Qui sait, ils pourraient toujours être là, juste cachés.

1
Christian

Je ne pense pas qu'il soit possible d'utiliser -moz-border-radius pour arrondir directement une image dans FireFox. Mais vous pouvez simuler les angles arrondis à l'ancienne, avec une marge supplémentaire.

Donc, cela ressemble à ceci:

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

Puis le 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;}

Les images de fond des coins ressemblent à un croissant de lune, avec transparence. Il s’agit d’une technique d’espace négatif, dans laquelle vous laissez apparaître l’image à travers la transparence des coins.

Les coins avec PNG-24 fonctionneront très bien. Si vous pouvez vous en sortir, vous pouvez utiliser les fonds GIF pour IE6 ou simplement supprimer l’image de fond pour les coins carrés. Utilisez des commentaires conditionnels pour servir le CSS à IE6.

1
fisherwebdev

Solution de contournement: définissez l'image en tant que arrière-plan d'un élément conteneur, puis ajoutez le rayon de la bordure sur ce élément.

Cela ne fonctionnera que si l'image a exactement la même taille que la div. Sauf si vous utilisez la nouvelle propriété css de Firefox 3.6 qui permet de redimensionner l’image d’arrière-plan, pratiquement personne n’est déjà sur 3.6.

Je suis donc d’accord avec Alex, c’est-à-dire si vous faites de l’image la taille du div/autre Elm.

1
Dale Larsen

Firefox semble couper une image d’arrière-plan. Par conséquent, si vous définissez une image d’arrière-plan h1 et appliquez un rayon de bordure à celui-ci, elle sera découpée. (juste vérifié dans FF 3.6.12)

0
Dave Rau