当前位置：网站首页>Background position position NOUN

Background position position NOUN

2022-06-12 08:40:00 【Little boy who likes hot pot】

utilize background—position:x y;

x and y Coordinates can be in azimuth nouns or precise units .

Parameters ：（1）position It can be for top、center、bottom、left、center、right etc.

          （2）length How much can it be px

1. If both values specified are positional nouns , Then the order of the two values is independent , such as left,top and top,left The effect is the same

Horizontal center ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Background location —— Position NOUN </title>

    <style>
            div{
                  width:  300px;
                  height: 300px;
                  background-color: pink;
                  background-image: url(images/logo.png);
                  /*  Background tile  */
                  background-repeat: no-repeat;
                  
                  /* background-position:  Position NOUN ; */
                  background-position: center top;
                
            }
    </style>
</head>

<body>
           <div></div>    
</body>

</html>

Running effect ：

 

 2. Align Center right

Code ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Background location —— Position NOUN </title>

    <style>
            div{
                  width:  300px;
                  height: 300px;
                  background-color: pink;
                  background-image: url(images/logo.png);
                  /*  Background tile  */
                  background-repeat: no-repeat;
                  
                  /* background-position:  Position NOUN ; */
                 background-position: right center;
            }
    </style>
</head>

<body>
           <div></div>    
</body>

</html>

Running effect ：

 3. If only one noun is specified , The other value is omitted , The second value is centered by default

（1） right justify

Code ：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> Background location —— Position NOUN </title>

        <style>
                div{
                    width:  300px;
                    height: 300px;
                    background-color: pink;
                    background-image: url(images/logo.png);
                    /*  Background tile  */
                    background-repeat: no-repeat;
                    

                    /*  here , The level must be aligned to the right , The second parameter is omitted y The axis is vertically centered  */
                    background-position: right;
 
                }
        </style>
    </head>

    <body>
            <div></div>    
    </body>

    </html>

Running effect ：

（2） Horizontally Center

Code ：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> Background location —— Position NOUN </title>

        <style>
                div{
                    width:  300px;
                    height: 300px;
                    background-color: pink;
                    background-image: url(images/logo.png);
                    /*  Background tile  */
                    background-repeat: no-repeat;
                    
                   

                  /*  here , The first parameter must be  top y Shaft top alignment . The second parameter is omitted x The axis is horizontally centered */
                    background-position: top;
 
 
                }
        </style>
    </head>

    <body>
            <div></div>    
    </body>

    </html>

Running effect ：

 

原网站

版权声明
本文为[Little boy who likes hot pot]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/03/202203010547379037.html

边栏推荐

猜你喜欢

随机推荐