Home  >  Article  >  Web Front-end  >  How to display part of the image in css

How to display part of the image in css

藏色散人
藏色散人Original
2020-12-17 10:23:106505browse

How to implement css display of part of the picture: first create a div in the html to hold the background picture; then add css style to the div and add the background picture url; finally add a "background-position" style, and add appropriate negative values ​​​​to the style.

How to display part of the image in css

The operating environment of this tutorial: windows7 system, css3 version. This method is suitable for all brands of computers.

Recommended: "css video tutorial"

How to display only part of the image in css?

First create a div in the html to hold the background image.

How to display part of the image in css

Add css style to div and add background image url.

How to display part of the image in css

Refresh the page and you can see that the entire picture is now displayed.

How to display part of the image in css

Assume that we now need to display only the avatar part of the person in the picture. We need to modify the length and width of the image and set them to the size of the avatar part, which is about 70 elements.

How to display part of the image in css

#Then add a background-position style and add appropriate values ​​to the style. Note that this value is a negative number. Different values ​​will display different parts of the picture. You can adjust it and try it.

How to display part of the image in css

Refresh the page and you can see that only the avatar part of the picture is now displayed.

How to display part of the image in css

If the image is too large but the container is too small, and we want to display the complete image, we can use the background-size style, as shown in the figure.

How to display part of the image in css

After running the page, the complete background image is displayed on our container, but the image is scaled.

How to display part of the image in css

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn