css背景图片添加url

Say you want to put an image or two on a webpage. One way is to use the background-image CSS property.

假设您要在网页上放置一两个图片。 一种方法是使用background-image CSS属性。

This property applies one or more background images to an element, like a <div>, as the documentation explains. Use it for aesthetic reasons, such as adding a textured background to your webpage.

如文档所述，此属性将一个或多个背景图像应用于元素，例如<div> 。 出于美学原因使用它，例如在网页上添加带纹理的背景。

添加图像 (Add an Image)

It’s easy to add an image using the background-image property. Just provide the path to the image in the url() value.

使用background-image属性添加图像很容易。 只需在url()值中提供图像的路径即可。

The image path can be a URL, as shown in the example below:

图像路径可以是URL，如下例所示：

div {/* Background pattern from Toptal Subtle Patterns */background-image: url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png");height: 400px;width: 100%;
}

Or it can be a local path. Here’s an example:

也可以是本地路径。 这是一个例子：

body {/* Background pattern from Toptal Subtle Patterns */height: 400px;width: 100%;background-image: url("./images/oriental-tiles.png");
}

添加多个图像 (Add Multiple Images)

You can apply multiple images to the background-image property.

您可以将多个图像应用于background-image属性。

div {
/* Background pattern from Toptal Subtle Patterns */height: 400px;width: 100%;background-image: url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"),url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");background-repeat: no-repeat, no-repeat;background-position: right, left; 
}

That’s a lot of code. Let’s break it down.

那是很多代码。 让我们分解一下。

Separate each image url() value with a comma.

用逗号分隔每个图像的url()值。

background-image: url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"),url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");

Now position and enhance your images by applying additional properties.

现在，通过应用其他属性来定位和增强图像。

background-repeat: no-repeat, no-repeat;
background-position: right, left;

There are several sub-properties you can add to your background images, such as background-repeat and background-position, which we used in the above example. You can even add gradients to a background image.

您可以将几个子属性添加到背景图像中，例如在上例中使用的background-repeat和background-position 。 您甚至可以将渐变添加到背景图像。

See what it looks like when we put everything together.

当我们将所有内容放在一起时，看看是什么样子。

订单事项 (Order Matters)

The order that you list your images in matters because of the stacking order. That means the first image listed is nearest to the user, according to the documentation. Then, the next one, and the next, and so on.

由于堆叠顺序，您列出图像的顺序很重要。 根据文档 ，这意味着列出的第一张图像离用户最近。 然后，下一个，下一个，依此类推。

Here’s an example.

这是一个例子。

div {
/* Background pattern from Toptal Subtle Patterns */height: 400px;width: 100%;background-image: url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"),url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");background-repeat: no-repeat, no-repeat;
}

We’ve listed two images in the code above. The first image (morocco-blue.png) will be in front of the second (oriental-tiles.png). Both images are the same size and lack opacity, so we only see the first image.

我们在上面的代码中列出了两张图片。 第一张图片(morocco-blue.png)将位于第二张图片(oriental-tiles.png)的前面。 两张图片的大小相同，并且不透明，因此我们只能看到第一张图片。

But if we move the second image (oriental-tiles.png) over to the right by 200 pixels, then you can see part of it (the rest remains hidden).

但是，如果我们将第二个图像(oriental-tiles.png)向右移动200像素，那么您可以看到其中的一部分(其余部分保持隐藏状态)。

Here’s what it looks like when we put everything together.

这是我们将所有内容放在一起时的样子。

什么时候应该使用背景图片？ (When Should You Use Background Image?)

There’s a lot to like about the background-image property. But there’s a drawback.

关于background-image属性，有很多喜欢的地方。 但是有一个缺点。

The image may not be accessible to all users, the documentation points out, like those who use screen readers.

该文档指出，并非所有用户都可以访问该图像，就像使用屏幕阅读器的用户一样。

That’s because you can’t add textual information to the background-image property. As a result, the image will be missed by screen readers.

这是因为您无法将文本信息添加到background-image属性。 结果，屏幕阅读器会遗漏图像。

Use the background-image property only when you need to add some decoration to your page. Otherwise, use the HTML <img> element if an image has meaning or purpose, as the documentation notes.

仅当需要在页面上添加装饰时，才使用background-image属性。 否则，如文档所述，如果图像具有含义或目的，请使用HTML <img>元素。

That way, you can add text to an image element, using the alt attribute, which describes the image. The provided text will be picked up by screen readers.

这样，您可以使用alt属性(它描述图像)将文本添加到图像元素。 屏幕阅读器将提取提供的文本。

<img class="house" src="./images/farnsworth_house.jpeg"alt="A glass house designed by Ludwig Mies van der Rohe located in Plano, Illinois.">

Think of it this way: background-image is a CSS property, and CSS focuses on presentation or style; HTML focuses on semantics or meaning.

这样想： background-image是一个CSS属性，而CSS专注于表示形式或样式； HTML专注于语义或含义。

When it comes to images, you’ve got options. If an image is needed for decoration, then the background-image property may be a good choice for you.

对于图像，您可以选择。 如果需要装饰图像，那么background-image属性可能是您的理想选择。

I write about learning to program and the best ways to go about it (amymhaddad.com).

我写了有关学习编程和实现它的最佳方法的文章( amymhaddad.com )。

翻译自: https://www.freecodecamp.org/news/how-to-add-an-image-url-to-your-div/

css背景图片添加url