Images in CSS


In the previous CSS lessons Taimienphi.vn introduced you to the Text property in CSS. To continue the series of CSS lessons, in the following lesson, Taimienphi.vn will introduce you to images in CSS or iMages CSS.


Images are important to almost all websites. We do not need to use a lot of images on the web, we just need to use “at the right time” and in the right position so that readers will not be confused by too much text.

Images in CSS

CSS plays an important role in controlling how images are displayed. In CSS, we can set the image properties below:

– Properties border Used to set the border width of the image.

– Properties Cao Used to set the height of the image.

– The width property is used to set the image width.

– Properties -moz-opacity Used to set the transparency of images.

Refer to the following article of Taimienphi.vn to learn in detail image attributes (image) in CSS.

Table of Contents:
1. The Image Border property in CSS
2. Image Height property in CSS
3. Image Width property in CSS
4. -moz-opacity property in CSS

Images in CSS

1. The Image Border property in CSS

The Image Border property in CSS is used to set the border width of the image. The value of this attribute can be either a measurement of length or a percent.

If the value is set to 0 pixels, the image has no border.

For example:

image image in css

The code above returns the following output:

image image in css 2

2. Image Height property in CSS

The Height attribute in CSS is used to set the height of the image. The value of this attribute can be a measurement of height or%. If measured in%, the height of the image will be proportional to the block containing the image.

For example:

image image in css 3

The code above returns the following output:

image image in css 4

3. Image Width property in CSS

The Image Width property in CSS is used to set the width of the image. This property can use either width or% values. In units of%, the width of the image will be proportional to the block containing the image.

For example:

image image in css 5

The code above returns the following output:

image image in css 6

4. -moz-opacity property in CSS

Properties -moz-opacity in CSS is used to set image transparency. This property is used to create transparent images on Mozilla browsers. IE uses the filter alpha (opacity = x) to create transparent images.

On the Mozilla browser (-moz-opacity: x) x can be any value from 0.0 – 1.0. The lower the value, the higher the element transparency.

On IE, filter (filter: alpha (opacity = x)) x can be any value from 0 – 100. The lower the value, the higher the element transparency.

For example:

image image in css 7

The code above returns the following output:

image image in css 8

The above CSS lesson Taimienphi.vn has just introduced you to image attributes in CSS. In the next lesson, Taimienphi.vn will introduce you to the link in CSS.

https://thuthuat.taimienphi.vn/hinh-anh-image-in-css-48855n.aspx
Also readers can refer to some other articles already on Taimienphi.vn to learn more properties background in CSS Please.

.

Add a Comment

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