Firefox -moz-border-radius non ritaglierà l’immagine?

Qualcuno sa come ottenere Firefox per ritagliare gli angoli se è impostato il raggio del bordo di un’immagine? L’elemento di contenimento funzionerà bene ma ottengo brutti angoli sporgenti.

Qualche modo per risolvere il problema senza impostare l’immagine come immagine di sfondo o elaborarla prima di metterla sul mio sito?

Non si ritaglia se applichi il raggio del bordo direttamente all’elemento img ? Ci sono problemi noti con -moz-border-radius per quanto riguarda il contenuto contenuto .

–modificare

OK, non ritaglia neanche img . Se la tua immagine è una specie di png / gif su uno sfondo solido potresti essere in grado di fare qualcosa del genere:

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

Ma se stai cercando di ottenere angoli arrotondati su una foto, non funzionerà in 3.5.

Soluzione alternativa: imposta l’immagine come sfondo di un elemento del contenitore, quindi aggiungi il raggio del bordo su quell’elemento.

Penso di avere la risposta ma mi dispiace per il mio inglese … Ho risolto la domanda mettendo un altro div con il bordo e senza il colore di sfondo sull’immagine.

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

Soluzione alternativa: imposta l’immagine come sfondo di un elemento del contenitore, quindi aggiungi il raggio del bordo su quell’elemento.

Questo non funzionerà a meno che l’immagine abbia esattamente la stessa dimensione del div. A meno che non si usi la nuova proprietà css in firefox 3.6 che consente il ridimensionamento delle immagini di sfondo, ma quasi nessuno è già su 3.6.

Quindi sono d’accordo con Alex, cioè se fai l’immagine della dimensione del div / altro olmo.

Non penso che ci sia un modo per usare -moz-border-radius per arrotondare direttamente un’immagine in FireFox. Ma puoi simulare gli angoli arrotondati alla vecchia maniera, con margini extra.

In modo che assomigli a questo:

 
situation normal

Quindi il 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;} 

Le immagini di sfondo degli angoli sembrano una luna crescente, con trasparenza. Questa è una tecnica spaziale negativa, in cui si consente all’immagine di mostrare attraverso dove gli angoli hanno la loro trasparenza.

Gli angoli div con sfondi PNG-24 funzioneranno molto bene. Se riesci a gestire lo spavento, puoi utilizzare gli sfondi GIF per IE6 o rimuovere semplicemente l’immagine di sfondo interamente per gli angoli quadrati. Utilizza i commenti condizionali per servire il CSS in IE6.

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

Ho ottenuto lo script “border-radius.htc” da questo link:

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

Quello che fa aggiunge il supporto per gli angoli arrotondati per IE8. Ho anche dovuto impostare la posizione: relativa e z-index, perché altrimenti il ​​div (e l’immagine di sfondo) mostrerebbe sotto il contenitore div desiderato in cui è stato inserito il contenitore (round_image_borders) div.

Questo funziona per:

FF 3.6.16

IE 8

Chrome 12.0

E sì, l’immagine deve avere le stesse dimensioni del div con la class round_image_borders. Ma questa soluzione alternativa è pensata per essere utilizzata con immagini che hanno tutte la stessa dimensione.

Se usi l’overflow: nascosto non visualizzerà gli angoli dell’immagine che spunta.

Chissà, potrebbero ancora essere lì, solo nascosti.

 img { overflow: hidden; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; } 

Sembra che Firefox sembra ritagliare un’immagine di sfondo, quindi se si imposta un’immagine di sfondo h1 e si applica il raggio del bordo a quello che verrà ritagliato. (appena verificato in FF 3.6.12)