Images are very important part of any Web Page. Though it is not recommended to include lot of images but it is still important to use good images wherever it is required. CSS plays a good role to control image display. You can set following image properties using CSS. The border property is used to set the width of an image border. The height property is used to set the height if an image. The width property is used to set the width if an image. The –moz-opacity property is used to set the opacity of an image.
The border property of an image is used to set the width of an image border. This property can have a value in length of in %. A width of zero pixels means no border. Here is the example: <img style=”border:0px;” src=/images/css.gif/> <br /> <img style=”border: 3px dashed red:” src=”/images/css.gif”/>
The height property of an image is used to set the height of an image border. This property can have a value in length or in %.While giving value in %, it applies it in respect of the box in which an image is available. Here is the example <img style=”border:1px solid red;” width :100px;” src=/images/css.gif/> <br/> <img style=”border:1px solid red:” width:100%; src=”/images/css.gif”/>
The width property of an image is used to set the width of an image. This property can have a value in length of in % . while giving value in %, it applies it in respect of the box in which an image is available
Here is the Example <img style =”border :1px solid red; width :100px;” Src=”/images/css.gif”/> <br/> <img style = “border :1px solid red; width :100%;” Src=”/images/css.gif”/>
The –moz-opacity property of an image is used to set the opacity of an image. This property is used to create a transparent image in Mozilla.IE uses filter: alpha(opacity=x) to create transparent images. In Mozilla(-moz-opacity:x) x can be a value from 0.0-1.0.A lower value makes the element more transparent. In IE (filter:alpha(opacity;=x)) x can be a value from 0 -100. A lower value makes the element more transparent Here is the example: <img style =”border :1px solifd red; mox – opacity:0.4; filter:alpha (opacity=40);src=”/images/css.gif”/>
Creating a transparent Image The CSS3 property for transparency is opacity First we will show you how to create a transparent image with CSS Img { Opacity:0.4; Filter:alpha(opacity =40);/* for IE8 and earlier*/ IE9 , Firefox , Chrome, Opera and Safari use the property opacity for transparency . the opacity property can take a value from0.0 – 1.0. A lower value makes the element more transparent. IE8 and earlier use filter:ampha(opacity=x).The x can take a value from 0-100.A lower value makes the element more transparent.
Image transparency-Hover effect The CSS looks like this: Img { Opacity:0.4; Filter:alpha(opacity=40);/* For IE8 and earlier*/ } Img;hover { Opacity:1.0; Filter:alpha(opaciy=100); For IE8 and earlier*/ The first CSS block is similar to the code in Example1.In addition ,we have added What should happen when a user hover one of the images .In this case we want the image to NOT be transparent when the user hover over it. The CSS for this is:opacity=1. IE8 and earlier:filter:alpha(opacity=100). When the mouse pointer moves away from the image,the image will be transparent again.
Text in Transparent Box <html> <head> <style type=”text/css”> div>background { Width :500px; Height:250px; Background:url(klematis.jpg)repeat; Border:2px solid black; } div.transbox { Width:400px; Height:180px; Margin:30px 50px; Background-clor:#ffffff; Border:1 px solid black; Opacity:0.6; Filter:alpha(opacity=60):/For IE8 and earlier*/ } div.transbox p { Margin:30px 40px; Font-weight:bold; Color:#000000; } </style> </head> <body> <div class=”background”> <div class=”transbox”> <p>This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. <p> </div> </div> </body> </html> First, we create a div element(class=”background”) with a fixed height and width ,a background image, and a border. Then we create a smaller div(class=”transbox”)inside the div element. The “transom” div have a fixed width, a black ground color, and a border-and it is transparent, Inside the transparent div, we add some text inside a p element.
The display property specifies if/how an element is displayed ,and the visibility property be visible or hidden.
You liked the article?
Like: 0
Vote for difficulty
Current difficulty (Avg): Medium
TekSlate is the best online training provider in delivering world-class IT skills to individuals and corporates from all parts of the globe. We are proven experts in accumulating every need of an IT skills upgrade aspirant and have delivered excellent services. We aim to bring you all the essentials to learn and master new technologies in the market with our articles, blogs, and videos. Build your career success with us, enhancing most in-demand skills in the market.
