作者选择了 多样性在技术基金作为 写给捐款计划的一部分接受捐款。
介绍
当使用CSS在网页上设计图像时,有许多重要的想法要记住。默认情况下,网页浏览器会以默认大小显示原始格式的图像。这可能导致图像比其余内容大,或者可以为您的网页布局引入意想不到的间隔问题。本教程将引导您通过网页的图像样式示例,允许您做出有关图像如何显示和修改以适应背景的明智决策。
在本教程中,您将创建一个由内容和三个图像组成的网页。第一张图像将作为一个<img />元素单独加载,第二张将被包装在<图像>元素中,具有相应的<figcaption>,第三张将使用<图像>元素来加载不同屏幕大小的不同图像,并使用对象匹配和对象位置属性来调整图像的大小。
前提条件
- 类型选择器、组合选择器和选择器组的知识,您可以在 How To Select HTML Elements to Style with CSS找到。
- CSS 框模型的知识,您可以在 How To Work with the Box Model in CSS教程中找到。
- 您可以从您的文本编辑器和网页浏览器选择的
背景大小属性工作经验,您可以在 How To Apply Background Styles to HTML Elements with CSS教程中了解更多。 - 一个空的 HTML 文件存储在您的本地机器上作为
indexhtml,您可以从您的文本编辑器和网页浏览器访问。 要开始,请参阅
建立基本的HTML和CSS
在本节中,您将为您在整个教程中写的所有视觉风格设置基本的HTML,您还将创建您的styles.css文件并添加设置内容布局的风格。
首先,在文本编辑器中打开index.html,然后在文件中添加以下HTML:
1[label index.html]
2<!doctype html>
3<html>
4 <head>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <title>City Night</title>
8 <link rel="preconnect" href="https://fonts.googleapis.com">
9 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10 <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@300;400&display=swap" rel="stylesheet">
11 <link rel="stylesheet" href="styles.css" />
12 </head>
13 <body>
14 </body>
15</html>
在<head>元素中定义了几个页面方面面。第一个<meta>元素指定了文本中使用的字符集。这样,特殊字符如口音符号将无需特殊的HTML代码进行渲染。第二个<meta>元素告诉浏览器(特别是移动浏览器)如何处理内容的宽度;否则,浏览器会模拟960px桌面宽度。接下来,<title>元素为浏览器提供页面标题。
接下来,页面将需要内容为风格. 您将使用从 Cupcake Ipsum的样本内容作为用作风格的填写文本。 在整个教程中,将突出显示从以前的步骤中添加的代码。 在文本编辑器中返回 index.html,并从以下代码块中添加突出的 HTML:
1[label index.html]
2<!doctype html>
3<html>
4 <head>
5 ...
6 </head>
7 <body>
8 <main>
9 <h2>City Night</h2>
10 <p> Candy bonbon carrot cake jelly beans shortbread fruitcake. Donut lollipop shortbread soufflé cotton candy cupcake cake. Pastry bear claw powder shortbread gingerbread.</p>
11 <p>Caramels jelly-o marshmallow muffin macaroon bear claw candy canes gummies. Muffin shortbread sweet roll pastry marzipan pudding.</p>
12 <p>Danish gummies oat cake marzipan shortbread pudding chocolate cake. Donut biscuit danish chocolate cake marzipan. Bonbon cheesecake gingerbread sesame snaps brownie ice cream caramels halvah.</p>
13 </main>
14 </body>
15</html>
<main>元素包含页面的主要内容,具有City Night的<h2>文本标题,随后有三个<p>内容元素。
将您的更改保存到 index.html,然后在同一个目录中创建一个名为 styles.css 的文件。 在文本编辑器中打开此文件. 在您的 styles.css 文件中,从以下代码块中添加 CSS:
1[label styles.css]
2body {
3 margin: 0;
4 font: 100% / 1.5 Inconsolata, monospace;
5 color: hsl(230, 100%, 95%);
6 background-color: hsl(230, 40%, 10%);
7}
8
9h2 {
10 font-size: 3.5rem;
11 font-weight: 300;
12 text-shadow: 0 0 1em hsla(320, 100%, 50%, 0.5),
13 0 0 0.125em hsla(320, 100%, 60%, 0.5),
14 -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.125),
15 0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.25);
16}
17
18main {
19 margin: 2rem auto 4rem;
20 width: 90%;
21 max-width: 70rem;
22}
23
24p {
25 font-size: 1.25rem;
26 max-width: 75ch;
27}
这些风格将视觉美观和布局添加到页面上。体规则集会调整默认值以加载Inconsolata字体,然后改变颜色为轻蓝色和背景颜色为暗蓝色紫色。接下来,h2标题被重新大小,使用更薄的字体重量,并通过使用文本阴影属性获得独特的效果。主元素设置为在页面中间保持,并停止在宽度上增长,一旦达到70rem,即大约1120px。最后,p选择器将字体大小设置为1.25rem,并将单独的最大宽度设置为75ch,即当前字体大小为75个字符。
将您的更改保存到 styles.css,然后打开您的 Web 浏览器. 选择 ** 文件** 菜单项,然后选择 ** 打开** 选项,并将您的 index.html 文件加载到浏览器中。 以下图像显示该 HTML 将如何在浏览器中渲染:
在本节中,您为本教程创建了最初的HTML和CSS。您在页面上加载了自定义字体,并使用文本阴影属性创建了独特的标题。在下一节中,您将使用<img />元素添加您的第一个图像到页面,了解其默认浏览器风格,并将页面上的图像设置为响应性。
使用<img />元素设置流体宽度
在网络上处理图像时,需要注意几件事:首先,图像默认显示在每像素的页面像素上,这意味着如果图像高达2048像素,那么它会在浏览器上占用大量空间,通常会导致横向和垂直滚动。接下来,图像被认为是线性流量内容,这意味着图像在浏览器中像文本一样被处理,并且可以被放置在线上。
要开始在网页中使用图像,请在命令提示中运行下列操作来创建一个名为图像的新目录:
1mkdir images
接下来,你将下载一个 Luke Stackpoole的 彩色门的建筑物的照片。这张图像来自股票摄影网站 Unsplash。运行以下弯曲命令将照片下载到新的图像目录:
1curl -sL https://assets.digitalocean.com/articles/68128/night-doors.jpg -o images/night-doors.jpg
现在你已经在计算机上可以使用该图像了,在文本编辑器中打开index.html。在内容中的第一个段落后,添加一个具有src属性的<img />自闭元素,如下列代码块所示:
1[label index.html]
2...
3<main>
4 <h2>City Nights</h2>
5 <p>Candy bonbon carrot cake jelly beans shortbread fruitcake. Donut lollipop shortbread soufflé cotton candy cupcake cake. Pastry bear claw powder shortbread gingerbread.</p>
6 <img src="images/night-doors.jpg" />
7 ...
8</main>
9...
src属性将浏览器引导到您从 Unsplash 下载的图像。
与图像合作的一个非常重要的方面是提供一个alt属性与图像的描述,这将有助于您的网站的各种用户知道图像内容,特别是那些使用屏幕阅读器的人。有助于提供图像的背景细节,特别是因为它涉及到其他文本内容。
以下代码块中的突出HTML提供了此图像的alt文本描述:
1[label index.html]
2...
3<img src="images/night-doors.jpg" alt="Three floors of several brightly-colored doors with a person walking on the second floor" />
4...
将图像添加到index.html,然后在您的 Web 浏览器中打开文件. 图像将在第一和第二段之间加载。 重置浏览器不会对图像产生任何影响,如下动画所示:
正如本节开始时所提到的,图像以其原始大小显示,不论屏幕大小如何。为了使此图像适合更多的屏幕大小,您将接下来给图像流体大小。
要定义流体图像,请在文本编辑器中打开styles.css。创建一个img元素选择器,然后添加一个具有100%值的max-width属性,如下列代码块所示:
1[label styles.css]
2..
3p {
4 font-size: 1.25rem;
5 max-width: 75ch;
6}
7
8img {
9 max-width: 100%;
10}
该最大宽度属性告诉他们可以缩放的图像,以适应一个空间。它还允许图像增长,直到它达到原始像素大小。这与使用宽度属性设置为100%不同,如果容器大于图像,图像将超过原始大小。
将您的更改保存到 styles.css,然后返回浏览器并更新 index.html. 重置浏览器,使图像缩小并备份,直到它达到完整的像素大小。
在本节中,您使用了<img />标签,并在页面上成功地加载了图像。您在图像上使用了alt属性,并对图像进行了足够的描述。 最后,您尝试了一种方法来调整所有图像的大小,以适应可用的空间。
提供< 图像>和< 图像>的标题
通常,一个图像需要附带的描述性文本,以便给读者更多关于图像的背景,例如图像中的谁或图像来自哪里。对于这种情况,将<img />放在一个<图像>元素中,其中有一个<figcaption>元素,以保持描述性文本。
首先,在以下代码块中运行此弯曲命令,将图像下载到图像目录中:
1curl -sL https://assets.digitalocean.com/articles/68128/tokyo-street.jpg -o images/tokyo-street.jpg
接下来,在文本编辑器中打开index.html。在第二和第三段之间,添加一个<figure>元素。在<figure>中,添加一个<img />元素,具有src属性,指向你刚刚下载的图像。
1[label index.html]
2...
3<p>Caramels jelly-o marshmallow muffin macaroon bear claw candy canes gummies. Muffin shortbread sweet roll pastry marzipan pudding.</p>
4
5<figure>
6 <img src="https://cdn.jsdelivr.net/gh/andsky/tutorials-images/images/tokyo-street.jpg" alt="A motion blurred street with an in-focus taxi." />
7</figure>
8
9<p>Danish gummies oat cake marzipan shortbread pudding chocolate cake. Donut biscuit danish chocolate cake marzipan. Bonbon cheesecake gingerbread sesame snaps brownie ice cream caramels halvah.</p>
10...
保存这些更新,然后返回您的浏览器加载 index.html. 图像显示在第二和第三段之间,但由于默认的样式,应用了一些插入间隔,如下图像所示:
额外的<图>间隔应用于元素的左侧和右侧的边缘属性,这是大多数浏览器中发现的默认样式,在左侧和右侧放置一个40px边缘,在顶部和底部放置一个1em边缘。
若要调整此默认风格,请在文本编辑器中返回 styles.css。 创建一个新的 figure元素选择器,并在内部添加一个margin属性设置为2rem 0`,如下列代码块所示:
1[label styles.css]
2...
3img {
4 max-with: 100%;
5}
6
7figure {
8 margin: 2rem 0;
9}
将边缘设置为2rem 0将将2rem间隔应用到图像的顶部和底部,并删除侧面的间隔,这将给图像更多的文本间隙,但允许它占用更多的空间。
将您的更改保存到styles.css,然后返回您的浏览器以更新页面。
接下来,要为图像添加一个标签,请在文本编辑器中返回index.html。在<figure>元素内部和<img />元素下,添加一个<figcaption>标签。
1[label index.html]
2...
3<figure>
4 <img src="https://cdn.jsdelivr.net/gh/andsky/tutorials-images/images/tokyo-street.jpg" alt="A motion blurred street with an in focus taxi." />
5 <figcaption>Taxi in Tokyo, Japan</figcaption>
6</figure>
7...
标签的内容有助于提供关于图像的进一步信息,而这并不明显。这与alt文本不同,它用词语描述了图像的内容。
由于HTML的顺序,
返回文本编辑器中的styles.css。 要创建一个重叠,需要将一个位置:相对属性值添加到图像选择器中,然后创建一个figcaption元素选择器,并添加以下突出的 CSS:
1[label styles.css]
2...
3figure {
4 margin: 2rem 0;
5 position: relative;
6}
7
8figcaption {
9 position: absolute;
10 bottom: 0;
11 left: 0;
12 right: 0;
13 padding: 5rem 1rem 1rem;
14 background: linear-gradient(to top, hsla(230, 40%, 5%, 0.95), hsla(230, 40%, 5%, 0));
15}
figcaption风格将容器设置为以位置,底部、右边和左边属性覆盖图像的底部。接下来,padding属性在顶部为5rem而大,以便在文本内容上放宽,左侧、右侧和底部有较小的1rem间隔。最后,您创建了与背景属性的linear-gradient()值的梯度,即过渡的黑蓝色为95%的透明度,直到同一颜色为0%的透明度。
将您的更改保存到 styles.css,然后返回您的浏览器以更新页面. <figcaption> 的梯度背景出现在图像的底部,但它超过了底部和右侧的图像。
有两个不同的问题导致这种不一致,需要两种方法来调整风格并纠正问题。
第一种方法是如何将<img />元素作为内线文本的默认处理。底部的这个额外空间是线高间隔,使文本线之间的空间。
第二个问题是图像的像素到像素尺寸与主元素的最大宽度之间的尺寸差异,因为<图像>是一个块元素,而图像图像被设置为从左边到右边的范围,它会增加到填满比图像更大的空间。解决这个问题的第一种方法是将<图像>更改为百分之百设置为宽度。通过设置这个宽度,图像将忽略最大宽度:百分之百默认,而代替填充整个空间。请注意,这种方法可以导致图像的扭曲取决于大小差异。修复此问题的第二个策略是将图像更改为线块设置为显示属性。这种方法将导致图像`元素
在文本编辑器中返回styles.css,并为每个问题添加显示方法。在图像选择器中,将一个显示属性设置添加到线块的值。
1[label styles.css]
2...
3figure {
4 margin: 2rem 0;
5 position: relatve;
6 display: inline-block;
7}
8
9figure img {
10 display: block;
11}
12
13figcaption {
14 ...
15}
将更改保存到 styles.css,然后在 Web 浏览器中更新 index.html。 < 图像>` 缩小到图像的自然大小,图像不再被视为文本。
在本节中,您使用了<figure>和<figcaption>元素。您了解了<figure>和<img />元素的默认风格,以及如何改变它们以获得更有控制性的结果。 最后,您创建了一个标题,用有关照片的背景信息覆盖图像。
使用响应式图像交换与<图像>
在处理不同屏幕大小的图像时,有时图像不适当大小,并且需要适应布局。<picture>元素存在以满足此需求,通过定义不同的图像以不同屏幕大小显示。
要开始使用<picture>元素,你需要一系列相同源图像的不同大小的图像. 使用下面的curl命令下载三个相同的图像的 zip 档案(由 Pawel Nolbert):
1curl -sL https://assets.digitalocean.com/articles/68128/picture.zip -o images/picture.zip
一旦Zip文件完成下载,将内容提取到您的图像文件夹中。在提示中运行以下命令,将文件放入图像目录:
1unzip images/picture.zip -d ./images
现在,在文本编辑器中打开index.html。首先,您将创建一个<div>与英雄的类属性在打开<body>和<main>元素之间,然后从以下代码块中添加剩余的<picture>元素:
1[label index.html]
2...
3<body>
4 <div class="hero">
5 <picture>
6 <source srcset="images/tokyo-large.jpg" media="(min-width:70rem)" />
7 <source srcset="images/tokyo-medium.jpg" media="(min-width:40rem)" />
8 <img class="hero-image" src="images/tokyo-small.jpg" alt="Time-lapse exposure of a city at night." />
9 </picture>
10 </div>
11 <main>
12...
<图片>元素需要一个特定的结构,包括所需的<源 />元素和一个<img />元素作为内部的最后一个元素,而<图片>元素的所有可访问性和风格都来自<img />元素,这就是为什么<img />有类而<图片>没有。
<img />是当没有媒体查询要求时使用的默认图像。<source />元素定义了两件事:使用srcset属性的图像文件的位置,以及使用media属性的屏幕大小场景。
将您的更改保存到 index.html,然后在您的 Web 浏览器中打开文件. 下面的动画描绘了浏览器在窗口大小增加时交换图像:
随着屏幕大小的变化,图像大小也会发生变化,导致下面的文本被推到页面上,以便在这个英雄图像区域和内容之间创建一致的间隔,可以设置高度属性以保持一致的大小。
在文本编辑器中返回styles.css。在页面底部,创建一个类选择器为.hero。在选择器块中,从以下代码块中添加突出的 CSS:
1[label styles.css]
2...
3.hero {
4 height: 80vh;
5 max-height: 40rem;
6}
设置为80vh的高度值意味着.hero容器至少将占用浏览器屏幕高度的80%。然后max-height属性确保.hero不会大于40rem,这相当于640像素高。
将更改保存到styles.css,并在浏览器中更新index.html。如下动画所示,文本现在保持一致的位置。
文本和图像的重叠是由于浏览器在内容方面错误的结果,即使它超越了其祖先的容器,仍然可见。一个快速的解决方案是将一个过流:隐藏应用于.hero元素,但这不会解决当图像缩小时的额外空间。
要开始使用object-fit,请在文本编辑器中返回styles.css。由于<img />元素是对<picture>元素的样式控制的元素,请为.hero-image创建类选择器,并从以下代码块中添加突出的 CSS:
1[label styles.css]
2...
3.hero {
4 height: 80vh;
5 max-height: 40rem;
6}
7
8.hero-image {
9 height: 100%;
10 width: 100%;
11 object-fit: cover;
12}
为了使用对象匹配属性,图像需要能够垂直和横向增长。通过将高度和宽度属性设置为100%,您可以让对象匹配属性完全控制重新调整图像。如果没有对象匹配属性,图像将被缩小以匹配母容器。覆盖值允许图像垂直或横向边缘,取决于容器的方向。
下面的动画说明了object-fit属性如何允许图像生长,以填充.hero容器的整个空间,并在它穿过容器边缘时被隐藏,就像背景图像一样:
最后,有对象位置属性,这与背景位置属性类似,允许图像被固定到特定区域。
在文本编辑器中返回 styles.css,并将一个 object-position 属性添加到 .hero-image 选择器中。 将属性的值设置为 bottom right,这会将图像固定到右下方,当图像重定义时。
1[label styles.css]
2...
3.hero-image {
4 height: 100%;
5 width: 100%;
6 object-fit: cover;
7 object-position: bottom right;
8}
将此更改保存到styles.css,然后返回您的浏览器并更新index.html。
这次随着浏览器的宽度变化和图像的尺度,尺度源自容器的中心,如下动画所示:
本节介绍了<图片>媒体元素、对象匹配属性和对象位置属性,您使用了这些元素和属性的组合,在页面顶部创建了一个调整和调整的大图像。
结论
使用你在本教程中练习的技术,你现在已经准备好编写格式来格式化图像,以适应你的设计和布局。你创建了响应性图像,为页面上的所有<img />元素设置了全球最大宽度:100%。接下来,你格式化了图像标题来覆盖图像,并与图像一起生长和缩小图像。然后,你使用了<picture>元素以及object-fit和object-position属性来交换和扩展图像,以最适合屏幕大小。使用这些策略将帮助你解决涉及图像和页面布局的更复杂情况。
如果您想阅读更多 CSS 教程,请尝试 How To Style HTML with CSS series中的其他教程。