CSS – Images
CSS – Images
For displaying image in the HTML document, the CSS plays a vital role to control and project the image. The different attributes for images in CSS are as below,
Border: it sets the image border.
Height: it sets the height of the image.
Width: it sets the width of the image.
-moz-opacity: it sets the opacity of an image. This property actually creates transparency of the image and syntax varies from one browser to another.
Example:
<html>
<head>
</head>
<body>
<img style = "border:0px solid red height:100px; width:150px" src = "Desert.jpg" />
<br/>
<img style = "border:3px dashed red; height=50%; width:50%" src = "Desert.jpg" />
<br/>
<img style = "border:1px solid red; -moz-opacity:0.4; filter:alpha(opacity=40);" src = "Test.jpg" />
</body>
</html>
Output:
The output is run on the Mozilla browser, so the third image uses -moz-opacity:0.4 where lower value indicates more transparent image. The value ranges from 0.0 to 1.0.
If the browser is IE then it uses filter: alpha(opacity=40) where lower value indicates more transparent image. The value ranges from 0 to 100.
Quiz :Quiz 1: What is the different attributes used in images in CSS?
Quiz 2: How can you increase transparency of an image in CSS for both IE and Mozilla browsers?