码农教程 - 一技在手,衣食无忧! tools

目录

CSS background-position 属性

❮上一节 完整的CSS参考 下一节❯

示例

如何定位背景图片：

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个background-position属性设置背景图片的起始位置。

提示：默认情况下，一个背景图放置在元素的左上角，并垂直和水平重复。

展示演示❯

默认值： 0% 0%
遗传： 不
可动画： 是的。阅读可动画的尝试一下
版本： CSS1
JavaScript 语法： 对象.style.backgroundPosition="center"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
background-position 1.0 4.0 1.0 1.0 3.5

CSS 语法

background-position: value;

属性值

Value Description Demo
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom		 If you only specify one keyword, the other value will be "center" Demo ❯
x% y% The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value is: 0% 0% Demo ❯
xpos ypos The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions Demo ❯
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

更多示例

示例

如何将背景图片定位在顶部居中：

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center top;
}
亲自试一试 »

示例

如何将背景图片放置在右下角：

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: bottom right;
}
亲自试一试 »

示例

如何使用百分比定位背景图片：

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 50% 50%;
}
亲自试一试 »

示例

如何使用像素定位背景图片：

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 50px 150px;
}
亲自试一试 »

示例

使用不同的背景属性创建"hero" 图片：

.hero-image {
  background-image: url("photographer.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  height: 500px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}
亲自试一试 »

相关页面

CSS教程：CSS 背景

CSS 参考：背景图片属性

HTML DOM 参考：背景位置属性


❮上一节 完整的CSS参考 下一节❯