当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

CSS background-position用法及代码示例


在CSS中，body-position属性主要用于将图像设置在特定位置。

用法:

background-position:value;

属性值：
有一些重要的属性值可用于将图像设置在特定位置。


  • initial
  • inherit
  • left top
  • left center
  • left bottom
  • center top
  • center center
  • center bottom
  • right top
  • right center
  • right bottom
  • x％y％

    注意：这里，x％表示水平位置，y％表示相对于初始位置即左上的垂直位置。

  • x-pos y-pos
    注意：在这里，这些单位以像素或任何其他CSS单位表示。

此属性的值的示例：

    • background-position：left top;
    ：此属性用于将图像设置在左上方。
    <!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS | background-position Property 
    </title> 
    <style> 
        body { 
            background-image:  
url("https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png"); 
            background-repeat:no-repeat; 
            background-attachment:fixed; 
            background-position:left top; 
        } 
    </style> 
</head> 
  
<body> 
  
</body> 
  
</html>

    输出：

  • background-position：left center;：此属性用于将图像设置在左中心。
    <!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS | background-position Property 
    </title> 
    <style> 
        body { 
            background-image:  
url("https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png"); 
            background-repeat:no-repeat; 
            background-attachment:fixed; 
            background-position:left center; 
        } 
    </style> 
</head> 
  
<body> 
  
</body> 
  
</html>

    输出：

  • background-position：left bottom;;：此属性用于将图像设置在左下。
    <!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS | background-position Property 
    </title> 
    <style> 
        body { 
            background-image:
url("https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png"); 
            background-repeat:no-repeat; 
            background-attachment:fixed; 
            background-position:left bottom; 
        } 
    </style> 
</head> 
  
<body> 
  
</body> 
  
</html>

    输出：

  • background-position：center top;：此属性用于将图像设置在中心顶部位置
    <!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS | background-position Property 
    </title> 
    <style> 
        body { 
            background-image:  
url("https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png"); 
            background-repeat:no-repeat; 
            background-attachment:fixed; 
            background-position:center top; 
        } 
    </style> 
</head> 
  
<body> 
  
</body> 
  
</html>

    输出：


  • background-position：center center ;：此属性用于将图像设置在中心中心位置。
    <!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS | background-position Property 
    </title> 
    <style> 
        body { 
            background-image:  
url("https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png"); 
            background-repeat:no-repeat; 
            background-attachment:fixed; 
            background-position:center center; 
        } 
    </style> 
</head> 
  
<body> 
  
</body> 
  
</html>

    输出：

  • background-position：center bottom;：此属性用于将图像设置在中心底部位置
    <!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS | background-position Property 
    </title> 
    <style> 
        body { 
            background-image:  
url("https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png"); 
            background-repeat:no-repeat; 
            background-attachment:fixed; 
            background-position:center bottom; 
        } 
    </style> 
</head> 
  
<body> 
  
</body> 
  
</html>

    输出：

  • background-position：right top;：此属性用于将图像设置在右上位置
    <!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS | background-position Property 
    </title> 
    <style> 
        body { 
            background-image:  
url("https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png"); 
            background-repeat:no-repeat; 
            background-attachment:fixed; 
            background-position:right top; 
        } 
    </style> 
</head> 
  
<body> 
  
</body> 
  
</html>

    输出：

  • background-position：right center;：此属性用于将图像设置在右中心位置。
    <!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS | background-position Property 
    </title> 
    <style> 
        body { 
            background-image:  
url("https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png"); 
            background-repeat:no-repeat; 
            background-attachment:fixed; 
            background-position:right center; 
        } 
    </style> 
</head> 
  
<body> 
  
</body> 
  
</html>

    输出

  • background-position：right bottom;：此属性用于将图像设置在右下位置
    <!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS | background-position Property 
    </title> 
    <style> 
        body { 
            background-image:  
url("https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png"); 
            background-repeat:no-repeat; 
            background-attachment:fixed; 
            background-position:right bottom; 
        } 
    </style> 
</head> 
  
<body> 
  
</body> 
  
</html>

    输出：

  • background-position：25％75％;：此属性用于设置图像，以将图像设置为左起25％和顶起75％。
    <!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS | background-position Property 
    </title> 
    <style> 
        body { 
            background-image:  
url("https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png"); 
            background-repeat:no-repeat; 
            background-attachment:fixed; 
            background-position:25% 75&; 
        } 
    </style> 
</head> 
  
<body> 
  
</body> 
  
</html>

    输出：

  • background-position：30px 80px ;：此属性用于将图像设置为从左起30像素和从上起80像素。
    <!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS | background-position Property 
    </title> 
    <style> 
        body { 
            background-image:  
url("https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png"); 
            background-repeat:no-repeat; 
            background-attachment:fixed; 
            background-position:30px 80px; 
        } 
    </style> 
</head> 
  
<body> 
  
</body> 
  
</html>

    输出：

支持的浏览器：title属性支持的浏览器如下：

  • chrome
  • IE浏览器
  • 火狐浏览器
  • Opera
  • 苹果浏览器


相关用法


注：本文由纯净天空筛选整理自motamarriphani大神的英文原创作品 CSS | background-position Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。