背景图像位置css

This tutorial will show you a simple way to code a full page background image using CSS. And you'll also learn how to make that image responsive to your users' screen size.

本教程将向您展示一种使用CSS编写整页背景图像的简单方法。 您还将学习如何使图像响应用户的屏幕尺寸。

Making a background image fully stretch out to cover the entire browser viewport is a common task in web design. Fortunately, this task can be taken care of with a few lines of CSS.

使背景图像完全伸展以覆盖整个浏览器视口是Web设计中的常见任务。 幸运的是，可以使用几行CSS来完成此任务。

用图像覆盖视口 (Cover Viewport with Image)

First, we will want to make sure our page actually covers the entire viewport:

首先，我们要确保我们的页面实际上覆盖了整个视口：

html {   min-height: 100%;}

Inside html, we will use the background-image property to set the image:

在html内部，我们将使用background-image属性设置图像：

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

“背景大小”属性的魔力 (Magic of 'Background-Size' Property)

The magic happens with the background-size property:

神奇之处在于background-size属性：

background-size: cover;

cover tells the browser to make sure the image always covers the entire container, in this case html. The browser will cover the container even if it has to stretch the image or cut a little bit off the edges.

cover告诉浏览器确保图像始终覆盖整个容器，在本例中为html 。 即使浏览器必须拉伸图像或从边缘切掉一点，浏览器也将覆盖它。

Because the browser may stretch the image, you should use a background image that has high enough resolution. Otherwise the image may appear pixelated.

因为浏览器可能会拉伸图像，所以您应该使用分辨率足够高的背景图像。 否则，图像可能会显得像素化。

If you care about having all of the image appear in the background, then you will want to make sure the image is relatively close in aspect ratio compared to the screen size.

如果您想让所有图像都出现在背景中，那么您将要确保图像的长宽比与屏幕尺寸相比相对接近。

如何微调图像位置并避免平铺 (How to Fine Tune an Image Position and Avoid Tiling)

The browser can also choose to display your background image as tiles depending on its size. To prevent this from happening, use no-repeat:

浏览器还可以选择根据背景图像的大小将其显示为图块。 为防止这种情况发生，请使用no-repeat ：

background-repeat: no-repeat;

To keep things pretty, we will keep our image always centered:

为了保持美观，我们将图像始终居中：

background-position: center center;

This will center the image both horizontally and vertically at all times.

这将始终使图像水平和垂直居中。

We have now produced a fully responsive image that will always cover the entire background:

现在，我们生成了一个完全响应的图像，它将始终覆盖整个背景：

html {   min-height: 100%;   background-image: url(image.jpg);   background-size: cover;   background-repeat: no-repeat;   background-position: center center;}

滚动时如何固定图像 (How to Fix an Image in Place When Scrolling)

Now, just in case you want to add text on top of the background image and that text overflows the current viewport, you may wish to make sure your image stay in the background when the user scrolls down to see the rest of the text:

现在，以防万一您想在背景图像上方添加文本并且该文本溢出当前视口，您可能希望确保当用户向下滚动以查看文本的其余部分时图像保留在背景中：

background-attachment: fixed;

You can include all of the background properties described above using short notation:

您可以使用短记号包括上述所有背景属性：

background: url(image.jpg) center center cover no-repeat fixed;

可选：如何为移动设备添加媒体查询 (Optional: How to Add a Media Query for Mobile)

To add some icing on the cake, you may wish to add a media query for smaller screens:

要为蛋糕锦上添花，您可能希望为较小的屏幕添加媒体查询：

@media only screen and (max-width: 767px) {  html {     background-image: url(smaller-image.jpg);  }}

You can use Photoshop or some other image editing software to downsize your original image to improve page load speed on mobile internet connections.

您可以使用Photoshop或其他一些图像编辑软件来缩小原始图像的尺寸，以提高移动Internet连接上的页面加载速度。

So now that you know the magic of creating a responsive, full page image background, it is time to go create some beautiful websites!

因此，既然您知道创建自适应的全页图像背景的魔力，那么现在该创建一些漂亮的网站了！

是否想查看更多Web开发技巧和知识？ (Want to See More Web Development Tips and Knowledge?)

• to my weekly newsletter

  我的每周新闻

• Visit my blog at  

  访问我在博客

• on Twitter

  在Twitter上

翻译自:

背景图像位置css