Code HTML pour une image avec une bordure transparente

Transparent bords de l'image

• Le code HTML Document Object Model définit plusieurs attributs utiles tels que margin, padding et la bordure. Plusieurs attributs frontaliers existent qui peuvent vous aider à ajouter des bordures aux images et d'autres éléments de la page Web. Border-style définit le style d'un élément, border-width spécifie son épaisseur et border-color définit la couleur de l'élément. Si vous définissez border-style d'une image de "aucun," aucune bordure apparaît autour de l'image. Réglage de border-style d'une image de "transparent" place une bordure autour de l'image et rend la frontière invisible.

Styling Éléments de la page

• Ajouter une bordure transparente à une image en ajoutant un attribut border-color à une balise HTML img comme indiqué ci-dessous:

  Le Consortium World Wide Internet recommande de supprimer le style inline attributs de balises HTML et utiliser des classes CSS pour définir les propriétés de l'élément. Faire ce qui rend plus facile à maintenir vos pages de codes et RESTYLE rapidement en mettant à jour les informations de CSS au lieu de changer les attributs de style à l'intérieur des éléments tels que les balises img.

Classes CSS

• Si vous avez jamais utilisé CSS à des éléments de style de page Web, vous pouvez être donnant un moyen simple de sites Web de style rapidement. Concepteurs de site à créer des classes CSS et assigner des attributs tels que la couleur et le style de bordure pour eux. Ils ajoutent ensuite ces noms de classe à des balises HTML comme indiqué ci-dessous:

  
  
  
  
  

  

  Cet exemple fait référence à une classe CSS nommée redBorder. Cette classe pourrait avoir un attribut qui définit la couleur de bordure au rouge. Si vous utilisez cette technique, vous pouvez créer une classe de bordure transparente qui rend toute image transparente.

Changer l'image frontières par programme

• Lors de l'utilisation de CSS pour ajouter une bordure à l'image, vous pouvez effectuer cette tâche une fois ou faire changer la frontière tout moment vous aimez l'utilisation de javascript. Vous faites une image frontière verte transparente quand un utilisateur clique sur un bouton, un code similaire à celui de l'utilisation ci-dessous:

  document.getElementById ("ImageID") .style.borderColor ="transparent"-

  Cette déclaration utilise javascript pour changer l'attribut de couleur de la bordure d'une image de transparence. Vous pouvez aussi remplacer le mot "transparent" avec un autre nom de couleur pour changer la couleur de bordure transparente de l'image à une couleur de votre choix.

Considérations

• "Transparent" et "aucun" Les valeurs peuvent sembler être les mêmes, mais ils ne sont pas. Si border-width d'une image est de 30 pixels, par exemple, l'image prend plus de place si son border-style est transparente que si elle n'a pas de frontière à tous. En ajustant la largeur en pixels des frontières transparentes vous pouvez parfois positionner les images et autres éléments de la page plus précisément. Vous pouvez également expérimenter avec des frontières translucides. Ce sont les frontières qui ont différents degrés de transparence. Recherche sur Internet pour des tutoriels sur le CSS opacité à en apprendre davantage sur l'opacité des attributs.