Yocker
  1. Yocker
  3. Firefox -moz-border-radius non ritaglierà l’immagine?
Intereting Posts
Cos’è mach_absolute_time basato su iPhone Come posso rimuovere l’articolo da querystring in asp.net utilizzando c #? Graphviz: come passare da .dot a un grafico? Come creare uno schema XSD da una class? Completamento automatico jQuery per input creati dynamicmente Sincronizza SelectedItems in una listbox muliselect con una collezione in ViewModel Come potrei avere un router che utilizza un collegamento esterno, come google.com? Spark: sottrae due DataFrames Calcolo dell’intersezione del set in tempo lineare? Il cast intelligente su “Tipo” è imansible, perché “variabile” è una proprietà mutabile che potrebbe essere stata modificata in questo momento Perché i miei campi sono inizializzati su null o sul valore predefinito di zero quando li ho dichiarati e inizializzati nel costruttore della mia class? In C o C ++, dovrei controllare i parametri del puntatore contro NULL / nullptr? Come posso recuperare un elenco di parametri da una stored procedure in SQL Server LINQ to SQL – Left Outer Join con più condizioni di join Ottieni elementi casuali dall’array JavaScript

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)