How to set the position of the image in css

CSS is the abbreviation of Cascading Style Sheets, which is a language used for page layout and style design. In web page production, images are often used to enhance the visual effect of the page, and CSS can well control the position, size and display effect of images. This article will introduce how to set the position of images with CSS, hoping to be helpful to web page production workers.

1. Use the background-image and background-position attributes to set the position of the background image

In CSS, we can use the background-image attribute to set the background image for the element, and the background-position attribute to adjust the display position of the image in the element. The basic syntax is as follows:

background-image: url("图片地址");
background-position: x轴位置 y轴位置;

Among them, url() represents the path of the image, which can be an absolute path or a relative path; the x-axis position and y-axis position can use pixels (px), percentage (%), keywords (left, right, center, top, bottom) and other expressions.

For example, the following code sets a div with the ID pic as the background image flower.jpg, and displays it in the upper left corner:

#pic {
  background-image: url("flower.jpg");
  background-position: left top;
}

2. Use the img tag to embed the image in the element

In addition to using background images to decorate elements, we can also use img tags to embed images into elements. In this case, we need to use CSS to adjust the display position of the image in the element. The basic syntax is as follows:

<img src="图片地址" alt="图片描述">

img {
  position: relative; /* 相对定位 */
  left: x轴位置;
  top: y轴位置;
}

Among them, the position attribute can be set to relative, absolute or fixed to control the positioning of the image. The left attribute and the top attribute can also be expressed in pixels, percentages, keywords, etc.

For example, the following code embeds the image inside a div with the ID pic into the img tag and displays it in the center of the div:

<div id="pic">
  <img src="flower.jpg" alt="flower">
</div>

#pic {
  position: relative;
  width: 300px;
  height: 200px;
  background-color: #ccc;
}

#pic img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

In this example, we first embed the div Set the size to 300px*200px and paint it with a gray background. Then use the position attribute to position the image relatively, and use the left and top attributes to center it. Finally, use the transform property to adjust the horizontal and vertical offset of the image to ensure it is perfectly centered.

3. Summary

The above are two methods of using CSS to control the position of images. Whether using a background image or embedded image, we can control the position and size of the image through the positioning and offset properties of CSS, so that it can be perfectly integrated into the web design. At the same time, we can use other properties of CSS, such as transparency, transition effects, etc., to enhance the presentation of images and make the web page more beautiful and outstanding.

The above is the detailed content of How to set the position of the image in css. For more information, please follow other related articles on the PHP Chinese website!