• USA : +1 973 910 5725
  • INDIA: +91 905 291 3388
  • info@tekslate.com
  • Login

CSS Images Properties

CSS Images

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.

Image Border Property

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”/>

 

Image Height Property

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”/>

 

Image Width Property

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”/>

 

moz-opacity  Property

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”/>

Example 1

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.

 

Example 2

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.

 

Example 3

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.

 

CCC Display and Visibility

The display property specifies if/how an element is displayed ,and the visibility property be visible or hidden.

Summary
Review Date
Reviewed Item
CSS Images Properties
Author Rating
5

“At TekSlate, we are trying to create high quality tutorials and articles, if you think any information is incorrect or want to add anything to the article, please feel free to get in touch with us at info@tekslate.com, we will update the article in 24 hours.”

0 Responses on CSS Images Properties"

Leave a Message

Your email address will not be published. Required fields are marked *

Site Disclaimer, Copyright © 2016 - All Rights Reserved.