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