Image css settings

Image CSS Settings

CSS is one of the most important components in web design. It is a style sheet language used to define the appearance and formatting of web pages. Among them, image CSS settings are an integral part of web design.

CSS has an interesting feature, that is, it can directly act on elements in HTML documents, including images. Through CSS settings, we can change various attributes such as the size, position, and transparency of images to make the web page more beautiful, practical, and easy to read.

This article will focus on several properties commonly used in image CSS settings: height, width, position, background, transparency and border, and provide sample code and renderings.

1. Height and Width

In CSS, you can use the height and width attributes to set the height and width of the image. These two properties can be specified in pixels (px), percentages (%), or other units.

For example, if we want to set the width of an image to 100 pixels and the height to automatically adapt, we can write like this:

img {
  width: 100px;
  height: auto;
}

In the above code, the height attribute is set to "auto" means that the height will be adapted according to the original proportions of the image.

If we want to set the width of an image to 50% of the width of the web page and the height to adapt according to the original proportion, we can write like this:

img {
  width: 50%;
  height: auto;
}

2. Position

Through the position attribute in CSS, we can set the position of the image. Position has three commonly used attribute values: static, relative, and absolute.

• static: Default attribute value, pictures are displayed in the normal order of HTML documents.
• relative: Relative positioning, the picture is moved relative to its original position.
• Absolute: Absolute positioning, the image moves relative to the container containing it.

For example, if we want to move an image 30 pixels to the right relative to its original position, we can write like this:

img {
  position: relative;
  left: 30px;
}

In the above code, position is used :relative and left:30px attributes. The left attribute indicates moving the specified number of pixels to the left or right.

If we want to place an image in the upper right corner of the web page, we can write like this:

img {
  position: absolute;
  top: 0;
  right: 0;
}

In the above code, the position:absolute, top:0 and right:0 attributes are used . The top and right properties represent the distance relative to the top and right side of the set container respectively.

3. Background

Through the background property in CSS, we can set an image as the background. The background attribute has a variety of attribute values, including color, image, repetition method and position.

For example, if we want to use a picture as the background, we can write like this:

body {
  background-image: url("example.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

In the above code, we use the picture as the background of the body element and set the background- repeat, background-position and background-size attributes. Background-repeat is set to no-repeat, which means it will not reappear; background-position is set to center center, which means the image is centered as the background; background-size is set to cover, which means the background image is guaranteed to completely cover the background area.

4. Transparency

Through the opacity property in CSS, we can adjust the transparency of the image. The opacity attribute value is a number between 0 and 1, where 0 means completely transparent and 1 means completely opaque.

For example, if we want to set the transparency of an image to semi-transparent, we can write like this:

img {
  opacity: 0.5;
}

5. Border

Pass With the border attribute in CSS, we can add borders to images. The border properties include the width, style and color of the border line.

For example, if we want to add a 1-pixel solid border to an image, we can write like this:

img {
  border: 1px solid #000;
}

In the above code, we use the border attribute and set the width Set to 1 pixel, style to solid, and color to black.

The following is a complete sample code, showing the use of the six properties of height, width, position, background, transparency and border:

img {
  height: 200px;
  width: 200px;
  position: relative;
  left: 30px;
  background-image: url("example.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0.5;
  border: 1px solid #000;
}

Summary

Through CSS Settings can add more styles and effects to pictures, making web pages richer and more vivid. This article introduces six commonly used properties: height, width, position, background, transparency and border, including code examples and renderings. In practice, it needs to be comprehensively applied according to specific web design needs to create a more distinctive website.

The above is the detailed content of Image css settings. For more information, please follow other related articles on the PHP Chinese website!