网站建设之如何将图片URL添加到Div

假设您要在网页上放一两张图片。一种方法是使用background-imageCSS属性。 如文档所述<div>,此属性将一个或多个背景图像应用于元素,例如。出于美学原因使用它,例如在网页上添加带纹理的背景。 添加图像 使用该background-image属性添加图像很容易。只需在url()值中提 WP网站建设

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

如文档所述<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,我们在上面的示例中使用了。您甚至可以将渐变添加到背景图像。

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

WordPress网站建设

WordPress网站建设

 

订单事项

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

这是一个例子。

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像素,那么您可以看到其中的一部分(其余部分保持隐藏状态)。

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

WordPress网站建设

WordPress网站建设

什么时候应该使用背景图片?

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物业可能是您的理想选择。

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/40227

发表评论

电子邮件地址不会被公开。 必填项已用*标注