CSS: uso de imágenes
Las imágenes juegan un papel importante en cualquier página web. Aunque no se recomienda incluir muchas imágenes, es importante utilizar buenas imágenes siempre que sea necesario.
CSS juega un buen papel para controlar la visualización de imágenes. Puede establecer las siguientes propiedades de imagen mediante CSS.
los border La propiedad se utiliza para establecer el ancho del borde de una imagen.
los height La propiedad se utiliza para establecer la altura de una imagen.
los width La propiedad se utiliza para establecer el ancho de una imagen.
los -moz-opacity La propiedad se utiliza para establecer la opacidad de una imagen.
La propiedad del borde de la imagen
La propiedad de borde de una imagen se utiliza para establecer el ancho de un borde de imagen. Esta propiedad puede tener un valor en longitud o en%.
Un ancho de cero píxeles significa que no hay borde.
Aquí está el ejemplo:
<html>
<head>
</head>
<body>
<img style = "border:0px;" src = "/css/images/logo.png" />
<br />
<img style = "border:3px dashed red;" src = "/css/images/logo.png" />
</body>
</html>Producirá el siguiente resultado:
La propiedad de altura de la imagen
La propiedad de altura de una imagen se utiliza para establecer la altura de una imagen. Esta propiedad puede tener un valor en longitud o en%. Si bien da valor en%, lo aplica con respecto al cuadro en el que está disponible una imagen.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<img style = "border:1px solid red; height:100px;" src = "/css/images/logo.png" />
<br />
<img style = "border:1px solid red; height:50%;" src = "/css/images/logo.png" />
</body>
</html>Producirá el siguiente resultado:
La propiedad de ancho de imagen
La propiedad de ancho de una imagen se usa para establecer el ancho de una imagen. Esta propiedad puede tener un valor en longitud o en%. Si bien da valor en%, lo aplica con respecto al cuadro en el que está disponible una imagen.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<img style = "border:1px solid red; width:150px;" src = "/css/images/logo.png" />
<br />
<img style = "border:1px solid red; width:100%;" src = "/css/images/logo.png" />
</body>
</html>Producirá el siguiente resultado:
La propiedad -moz-opacity
La propiedad -moz-opacity de una imagen se utiliza para establecer la opacidad de una imagen. Esta propiedad se utiliza para crear una imagen transparente en Mozilla. IE usafilter:alpha(opacity=x) para crear imágenes transparentes.
En Mozilla (-moz-opacity: x) x puede ser un valor de 0.0 a 1.0. Un valor más bajo hace que el elemento sea más transparente (lo mismo ocurre con la opacidad de sintaxis válida para CSS3: x).
En IE (filtro: alfa (opacidad = x)) x puede ser un valor de 0 a 100. Un valor más bajo hace que el elemento sea más transparente.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<img style = "border:1px solid red; -moz-opacity:0.4; filter:alpha(opacity=40);" src = "/css/images/logo.png" />
</body>
</html>Producirá el siguiente resultado: