CSS coins arrondis sur img dans firefox

Le problème est assez simple, mais j'ai passé trop de temps à chercher une réponse. J'apprécierais que quelqu'un puisse jeter un peu de lumière sur le problème. Le CSS -moz-border-radius fonctionne avec un div, mais j'essaie de le faire fonctionner sur les étiquettes img.CSS coins arrondis sur img dans firefox

-webkit-border-radius fonctionne parfaitement sur img en chrome.

J'ai aussi essayé d'envelopper le img dans un div, qui a des coins arrondis et utilise overflow: hidden;. Cela fonctionne dans Chromium, mais aucun espoir dans Firefox.

Source

2009-10-28 gabriel9

Cette question a été posée: http://stackoverflow.com/questions/1347796/css3-firefox-moz-border-radius-wont-crop-out-image. On dirait que ce n'est pas encore implémenté –

vous pouvez mettre l'image en arrière-plan d'un div ont alors que div ont des coins arrondis

Source

2009-10-28 22:33:25

Sémantique ........... –

Great hack. Merci beaucoup, j'ai complètement oublié sur l'image de fond. Cela permettra également de résoudre le problème avec les navigateurs basés sur khtml. @ Koning Baard XIV Je ne comprends pas, qu'est-ce que cela signifie Sémantique? – gabriel9

Je pense qu'ils signifient montrer le code réel pour le faire –

Voici une solution qui peut vous aider à résoudre ce problème

http://learneveryday.net/css/css-round-corner-menu-with-image/

Source

2011-04-03 15:14:55

merci pour le code :) – Adrian

J'ai utilisé la suivant pour créer un rayon pour les coins du gif animé en haut de cette page .

<div class="slider"> 
    <a href="http://annsummersbysara.co.uk/party"> 
    <img style="border: 0px solid ; width: 687px; height: 150px;" 
     alt="Click here to book an Ann Summers Party" 
     title="Click here to book an Ann Summers Party" 
     src="images/new_top_banner.gif"> 
    </a>&nbsp;&nbsp;&nbsp; 
</div>

Et ceci est le css pour la div.

.slider{ 
    width:   687px; 
    height:   150px; 
    border:   2px #e5e5e5 solid; 
    -moz-border-radius: 8px; 
    border-radius:  8px; 
    margin-left:  auto; 
    margin-right:  auto; 
    margin-top:  5px; 
    overflow:  hidden; 
    text-align:  center; 
}

Source

2012-09-09 08:12:28

Bienvenue, et merci pour votre fragment de code, Jonathan. Cette question a été initialement posée en 2009, et dans les 3 années qui ont suivi, Firefox a été mis à jour de sorte que "' img' dans un 'div' avec' overflow: hidden' "fonctionne, ce que l'affiche originale a essayé de faire faire. Donc, le problème original n'est plus un problème; N'oubliez pas de vérifier les dates auxquelles vous répondez si vous cherchez dans les entrailles de StackOverflow. – MidnightLightning

@MidnightLightning +1 pour creuser ** deep **. On doit admirer la persistance. Il devrait y avoir un badge pour une telle chose. :) –

@Chamster Merci! Vous pouvez réellement +1 des commentaires si vous aimez ... (survolez et cliquez sur la flèche vers le haut);) – MidnightLightning

CSS coins arrondis sur img dans firefox

Répondre

Questions connexes