How to introduce image files in css-Front-end Q&A-php.cn

How to introduce image files in css

藏色散人

Release： 2023-01-04 09:38:19

Original

11462 people have browsed it

How to introduce image files into css: 1. Import through the "background-image:url (image address)" method; 2. Use the "background:url (image address)" method to import the image and display it to Just on the web page.

How to introduce image files in css

The operating environment of this tutorial: Dell G3 computer, Windows 7 system, HTML5&&CSS3 version.

Recommended: "css video tutorial"

css introduces image files

In CSS, you can use background-image :url (your image address) or background:url (your image address) to introduce images and display them on the web page.

<div id="bgimg"></div>
#bgimg {
background: #333 url(图片路径) center center no-repeat;
}

Copy after login

The first parameter is the background color of the bottom layer of the picture. The second parameter is the picture path. The third parameter is the relative position of the top and bottom of the picture (other parameters left and right). The fourth parameter is the picture. The relative position of the left and right (top, bottom), the fifth parameter, the repetition of the picture (other parameters repeat, repeat-x, repeat-y).

Example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>背景图片设置</title>
        <style>
            .demo{
                position:fixed;
                top: 0;
                left: 0;
                width:100%;
                height:100%;
                min-width: 1000px;
                z-index:-10;
                zoom: 1;
                background-color: #fff;
                background: url(1.png);
                background-repeat: no-repeat;
                background-size: cover;
                -webkit-background-size: cover;
                -o-background-size: cover;
                background-position: center 0;
            }
        </style>
    </head>
    <body>
        <div class="demo"></div>
    </body>
</html>

Copy after login

Rendering:

How to introduce image files in css

Description:

The background attribute is an abbreviation attribute that can be used in Set all background properties in one statement.

The background attribute is a property that specifically sets the background. You can set the background color or background image.

Let’s take a look at the properties that can be set for background:

background-color: Specifies the background color to be used.

background-position: Specifies the position of the background image.

background-size: Specifies the size of the background image.

background-repeat: Specifies how to repeat the background image.

background-origin: Specifies the positioning area of the background image.

background-clip: Specifies the drawing area of the background.

background-attachment: Specifies whether the background image is fixed or scrolls with the rest of the page.

background-image: Specifies the background image to use.

The background of an element is the total size of the element, including padding and borders (but not margins). By default, the background-image is placed in the upper left corner of the element and repeats both vertically and horizontally.

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