CSS – Images

  • CSS – Images

    • CSS – Images Lesson

      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?



CSS – Text
CSS – Links