当前位置：网站首页>Background position - mixed units

Background position - mixed units

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

1. If the two specified values are a mixture of precise units and position nouns , Then the first value is X coordinate , The second value is Y coordinate

Code 1：

<!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 —— Precise units </title>
    <style>
            div{
                  width:  300px;
                  height: 300px;
                  background-color: pink;
                  background-image: url(images/logo.png);
                  background-repeat: no-repeat;

                  /* X It must be 20  Y It must be center   Equivalent to background-position: 20px */
                  background-position: 20px center;
            }
    </style>
</head>

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

</html>

Running effect ：

  Code 2：

<!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 —— Precise units </title>
    <style>
            div{
                  width:  300px;
                  height: 300px;
                  background-color: pink;
                  background-image: url(images/logo.png);
                  background-repeat: no-repeat;


                  /*  Horizontal is centered , The vertical is 20 */
                  background-position:  center  20px;
            }
    </style>
</head>

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

</html>

Running effect ：

  Code 3： align horizontal center , Vertical distance top 40

<!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> Large background image </title>

    <style>
           body{
                background-image: url(images/bg.jpg);
                /*  The background does not repeat  */
                background-repeat: no-repeat;
                /*  Horizontal center , Vertically up  */
                background-position: center 40px ;
           }
    </style>
</head>

<body>
    
</body>

</html>

Running effect ：

 

原网站

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

边栏推荐

猜你喜欢

随机推荐