1. Accueil
  2. Question et réponse
  3. Bordure d'image semi-transparente

Bordure d'image semi-transparente

2009-03-13 5 views
0

Je souhaite que l'image saigne dans le conteneur div.imgborder et que le saignement soit semi-transparent (comme un effet de verre opaque). Y at-il un moyen d'y parvenir via CSS ou peut-être de définir un fond d'image avec une certaine opacité sur le div.imgborder?Bordure d'image semi-transparente

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 
     'http://www.w3.org/TR/html4/strict.dtd'> 
<html> 
<head> 
<title></title> 

<meta name='keyword' content=''> 
<meta name='description' content=''> 

<link rel='stylesheet' href='reset.css'> 

<style type='text/css'> 
    body { 
     background-color: #ccc; 
    } 

    div#container { 
     width: 960px; 
     margin-left: auto; 
     margin-right: auto; 
     margin-top: 50px; 
    } 

    img#myimg { 
     overflow: visible; 
    } 

    div.imgborder { 
     background-color: #222; 
     opacity: 0.9; 
     width: 160px; 
     height: 160px; 
     padding: 10px; 
    } 


</style> 

</head> 
<body> 
    <div id='container'> 

     <div class='imgborder' align='center'> 
      <img src='bar.jpg' alt='' width='160' height='160' id='myimg' /> 
     </div> 

    </div> 
</body> 
</html>

Source

2009-03-13 Lorenzo

Répondre

1

Vous pouvez créer un fichier PNG avec l'effet semi-transparent que vous aimez et ajouter ceci comme arrière-plan. Tout navigateur moderne sera ce rendu correctement et créer l'effet que vous voulez.

Source

2009-03-13 10:50:32

+0

Sons cool! J'aime cette solution – Lorenzo

2

Gecko et le soutien WebKit rgba de réglage() comme propriété de couleur de la bordure, de sorte que vous pourriez potentiellement mettre:

border-color: rgba(255,255,255,0.42);

..et ont une frontière qui est semi-transparente. Pour accomplir le saignement, cependant, vous devrez probablement superposer une div transparente sur l'image et lui donner une largeur et une hauteur égales à la largeur et la hauteur de l'image moins la largeur de la bordure. Donc, si l'image est 200x200, et que vous voulez une bordure de 2px, vous devrez probablement faire la div 196x196 puisque le modèle de boîte dicte que la largeur de la bordure est ajoutée aux dimensions largeur/hauteur.

Source

2009-03-13 10:55:59 Rahul

 Questions connexes

  • Aucun problème connexe^_^