CSS Background-Position 属性

2025年3月17日 | 阅读 7 分钟

引言

在 CSS 中，我们可以使用 background-position 属性来指定背景图像的位置。我们可以将图像设置在特定位置。我们提供的位置与背景图像的位置层相关。

语法

我们可以借助以下语法来实现 background 属性。

注意：CSS 将 background-position 的默认值设置为元素的左上角，并水平和垂直重复。

属性值

Background-position: left top

借助此属性，我们可以将图像设置在网页的左上角。

Background-position: left center

借助此属性，我们可以将图像设置在网页的左中位置。

background-position: left bottom

借助此属性，我们可以将图像设置在网页的左下角。

background-position: center top

借助此属性，我们可以将图像设置在网页的顶部中心位置。

background-position: center center

借助此属性，我们可以将图像设置在网页的中心位置。

background-position: center bottom

借助此属性，我们可以将图像设置在网页的底部中心位置。

background-position: right top

借助此属性，我们可以将图像设置在网页的右上角。

background-position: right center

借助此属性，我们可以将图像设置在网页的右中位置。

background-position: right bottom

借助此属性，我们可以将图像设置在网页的右下角。

Background-position: 25% 75%

借助此属性，我们可以将图像设置在网页左侧 25% 和顶部 75% 的位置。

background-position: 30px 80px

借助此属性，我们可以将图像设置在网页左侧 30px 和顶部 80px 的位置。

示例 1

在下面的示例中，我们在网页的左上角创建了一个 div。

代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
   .example {
  width: 300px;
  height: 200px;
  background-image: url("https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
  background-size: cover;
  background-position: left top;
  border: 1px solid #ccc;
 }
 </style>
</head>
<body>
 <div class="example"></div>
</body>
</html>

输出

说明

在上面的代码中，我们使用了 background-position: left top; 这样图像的位置就会移动到网页的左上角。

示例 2

在下面的示例中，我们创建了一个 div，它位于网页的顶部中心位置。

代码

<!DOCTYPE html>
<html lang="en">
<head>
 
<meta charset="UTF-8">
 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
<title>Document</title>
 
<style>
   
body {
     
margin: 0;
     
display: flex;
     
justify-content: center;
     
align-items: center;
     
min-height: 100vh;
     
background-color: #f0f0f0;
   
}
   
 .example {
     
width: 300px;
     
height: 200px;
     
background-image: url("https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
     
background-size: cover;
     
background-position: top center;
     
border: 1px solid #ccc;
     
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
   
}
 
</style>
</head>
<body>
 
<div class="example"></div>
</body>
</html>

输出

说明

在上面的代码中，我们使用了 background position: top center; 这样图像的位置就会移动到网页的顶部中心位置。

示例 3

在下面的示例中，我们创建了一个 div，它位于网页的左中位置。

代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  body {
   margin: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   background-color: #f0f0f0;
  }
  
  .example {
   width: 300px;
   height: 200px;
   background-image: url("https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
   background-size: cover;
   background-position: left center;
   border: 1px solid #ccc;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  }
 </style>
</head>
<body>
 <div class="example"></div>
</body>
</html>

输出

说明

在上面的代码中，我们使用了 background-position: left centre 这样图像的位置就会移动到网页的左中位置。

示例 4

在下面的示例中，我们创建了一个 div，它位于网页的左下角。

代码

<!DOCTYPE html>
<html lang="en">
<head>
 
<meta charset="UTF-8">
 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
<title>Document</title>
 
<style>
   
body {
     
margin: 0;
     
display: flex;
     
justify-content: center;
     
align-items: center;
     
min-height: 100vh;
     
background-color: #f0f0f0;
   
}
   
.example {
     
width: 300px;
     
height: 200px;
     
background-image: url("https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
     
background-size: cover;
     
background-position: left bottom;
     
border: 1px solid #ccc;
     
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
   
}
 
</style>
</head>
<body>
 
<div class="example"></div>
</body>
</html>

输出

说明

在上面的代码中，我们使用了 background-position: left button; 这样图像的位置就会移动到网页的左下角。

示例 5

在下面的示例中，我们创建了一个 div，它位于网页的中心位置。

代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  body {
   margin: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   background-color: #f0f0f0;
  }
  
  .example {
   width: 300px;
   height: 200px;
   background-image: url("https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
   background-size: cover;
   background-position: center center;
   border: 1px solid #ccc;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  }
 </style>
</head>
<body>
 <div class="example"></div>
</body>
</html>

输出

说明

在上面的代码中，我们使用了 background-position: centre centre 这样图像的位置就会移动到网页的中心位置。

示例 6

在下面的示例中，我们创建了一个 div，它位于网页的底部中心位置。

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .example {
      background-image: url("https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center bottom;
      width: 100%; /* Set a width for the div */
      height: 500px; /* Set a height for the div */
    }
  </style>
</head>
<body>
  <div class="example"></div>
</body>
</html>

输出

说明

在上面的代码中，我们使用了 background-position: centre button; 这样图像的位置就会移动到网页的底部中心位置。

示例 7

在下面的示例中，我们创建了一个 div，它位于网页的右上角。

代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end; /* Align content to the right side */
  align-items: flex-start; /* Align content to the top */
  min-height: 100vh; /* Ensure the body takes at least the viewport height */
}

.top-right-div {
  background-color: #f0f0f0;
  padding: 10px;
  position: absolute;
  top: 10px; /* Adjust this value to control vertical position */
  right: 10px; /* Adjust this value to control horizontal position */
}

 </style>
</head>
<body>
 <div class="top-right-div">
  This is a div in the top right corner.
</div>
</body>
</html>

输出

说明

在上面的代码中，我们使用了 background-position: right top 这样图像的位置就会移动到网页的右上角。

示例 8

在下面的示例中，我们创建了一个 div，它位于网页的顶部右中位置。

代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end; /* Align content to the right side */
  align-items: center; /* Align content vertically centered */
  min-height: 100vh; /* Ensure the body takes at least the viewport height */
}

.top-right-div {
  background-image: url("https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"); /* Replace with your image URL */
  background-position: right center; /* Set background position */
  background-repeat: no-repeat;
  padding: 10px;
  position: absolute;
  top: 0;
  right: 0;
}

 </style>
</head>
<body>
 <div class="top-right-div">
  This is a div in the top right corner.
</div>
</body>
</html>

输出

说明

在上面的代码中，我们使用了 background position: top right center; 这样图像的位置就会移动到网页的顶部右中位置。

示例 9

在下面的示例中，我们创建了一个 div，它位于网页的右下角。

代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  

  .top-right-div {
 width: 300px;
 height: 200px;
 background-color: light gray; /* Temporary background color for visibility */
 background-image: url("https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
 background-position: right bottom;
 background-repeat: no-repeat;
}

 </style>
</head>
<body>
 <div class="top-right-div">
  This is a div in the top right corner.
</div>
</body>
</html>

输出

说明

在上面的代码中，我们使用了 background-position: right bottom 这样图像的位置就会移动到网页的右下角。

示例 10

在下面的示例中，我们创建了一个 div，它位于网页的百分比位置。

代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  

  .top-right-div {
   width: 300px;
   height: 200px;
   background-image: url("https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
   background-position: 100% 100%; /* 100% from the right and 100% from the bottom */
   background-repeat: no-repeat;
  }

 </style>
</head>
<body>
 <div class="top-right-div">
  This is a div, which is an example of a background position.
</div>
</body>
</html>

输出

说明

在上面的代码中，我们使用了 background position: centre center; 这样图像的位置就会移动到网页的中心位置。

示例 11

在下面的示例中，我们创建了一个 div，它位于网页的像素位置。

代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  

  .top-right-div {
   width: 300px;
   height: 200px;
   background-image: url("https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
   background-position: 30px 80px; /* 100% from the right and 100% from the bottom */
   background-repeat: no-repeat;
  }

 </style>
</head>
<body>
 <div class="top-right-div">
  This is a div, which is an example of a background position.
</div>
</body>
</html>

输出

说明

在上面的代码中，我们使用了像素值的 background-position，这样图像的位置就会根据网页的像素值位置进行移动。

下一主题CSS Before 和 After

CSS Background-Position 属性

引言

语法

注意：CSS 将 background-position 的默认值设置为元素的左上角，并水平和垂直重复。

属性值

示例 1

示例 2

示例 3

示例 4

示例 5

示例 6

示例 7

示例 8

示例 9

示例 10

示例 11

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS Background-Position 属性

引言

语法

注意：CSS 将 background-position 的默认值设置为元素的左上角，并水平和垂直重复。

属性值

示例 1

示例 2

示例 3

示例 4

示例 5

示例 6

示例 7

示例 8

示例 9

示例 10

示例 11

相关帖子

CSS filter

CSS Slider

Box-shadow CSS

CSS Background-color

CSS clip-path

CSS 垂直对齐

CSS White Space

Grid Template Columns CSS

CSS checkbox style

CSS Position

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器