假设您要在网页上放一两张图片。一种方法是使用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)向右移动200像素,那么您可以看到其中的一部分(其余部分保持隐藏状态)。
这是我们将所有内容放在一起时的样子。
什么时候应该使用背景图片?
该background-image
物业有很多值得一提的地方。但是有一个缺点。
文档指出,并非所有用户都可以访问该图像,就像使用屏幕阅读器的用户一样。
那是因为您不能向background-image
属性添加文本信息。结果,屏幕阅读器会遗漏图像。
background-image
仅在需要在页面上添加装饰时才使用该属性。否则,<img>
如文档所述,如果图像具有意义或目的,请使用HTML 元素。
这样,您可以使用描述图片的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
物业可能是您的理想选择。
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/tech/courses/261997.html