如果你想给一个网页添加一些背景图片,那么最好的方式是使用 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-repeat
,background-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