如果你想给一个网页添加一些背景图片,那么最好的方式是使用 background-image 这个 CSS 属性。

正如文档所介绍的,这个属性可以给元素(比如 <div>)设置一张或者更多背景图片。比如,设置带纹理的背景会增加网页的美感。

添加一张图片

background-image 属性添加图片很容易,只需要把 url()值设置为图片路径。

图片路径可以是一个 URL,如下所示:

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

或者是一个本地路径:

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

添加多张图片

你可以给 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; 
}

这里涉及到的代码挺多的,我们来分解一下。

用逗号把每张图片的 url() 分隔开。

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; 

你可以给背景图片应用一些子属性,比如以上例子中的background-repeatbackground-position你还可以给背景图片添加渐变效果。

加上这些东西后,看看图片是什么样啦。

图片顺序

由于堆叠顺序,你排列图片的顺序很重要。根据文档,排列的第一张图片离用户最近(即显示在最前面),然后,下一个,下一个,依此类推。

看一下这个例子:

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;
}

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

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

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

为什么要使用背景图片

background-image 属性有很多优点,但是有一个缺点需要注意。

可能不是所有用户都能访问图片,比如文档中提到的使用屏幕阅读器的用户。

因为你不能将文本信息添加到 background-image 属性。这样一来,屏幕阅读器就会忽略图片。

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

这样,你可以使用 alt 属性(用于描述图片)将文本添加到图片元素。屏幕阅读器将访问提供的文本。

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

可以这样想:background-image 是一个 CSS 属性,而 CSS 专注于展示或样式; HTML 专注于语义或含义。

对于图片,你可以选择。如果是用于装饰的图片,那么 background-image 属性可能是你的理想选择。

欢迎在 amymhaddad.com 阅读我的文章。

原文:CSS Background Image – How to Add an Image URL to Your Div,作者:Amy Haddad