如何使用CSS设置图形和图像HTML元素的样式

来自菜鸟教程
跳转至：导航、​搜索

作为 Write for DOnations 计划的一部分，作者选择了 Diversity in Tech Fund 来接受捐赠。

介绍

在使用 CSS 对网页上的图像进行样式设置时，需要牢记许多重要的想法。 默认情况下，Web 浏览器以其默认大小以原始格式显示图像。 这可能会导致图像比内容的其余部分大，或者可能会为您的页面布局引入意外的间距问题。 本教程将引导您浏览网页图像样式的示例，使您能够就如何显示和更改图像以适应上下文做出明智的决定。

在本教程中，您将创建一个由内容和三个图像组成的网页。 第一个图像将作为 <img /> 元素单独加载，第二个图像将使用适当的 <figcaption> 包裹在 <figure> 元素中，第三个图像将使用 [ X177X] 元素加载不同屏幕尺寸的不同图像，并使用 object-fit 和 object-position 属性来调整图像大小。 您还将探索响应式网页设计的一些基础知识并确保图像的可访问性。

先决条件

设置基本 HTML 和 CSS

在本节中，您将为在整个教程中编写的所有视觉样式设置基本 HTML。 您还将创建 styles.css 文件并添加设置内容布局的样式。

首先在文本编辑器中打开 index.html。 然后，将以下 HTML 添加到文件中：

索引.html 

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>City Night</title>
    <link rel="preconnect" href="https://fonts.googleapis.com"> 
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
    <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@300;400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
  </body>
</html>

<head> 元素内定义了几个页面方面。 第一个 <meta> 元素指定用于文本的字符集。 这样，重音符号等特殊字符无需特殊 HTML 代码即可呈现。 第二个 <meta> 元素告诉浏览器（尤其是移动浏览器）如何处理内容的宽度； 否则，浏览器将模拟 960 像素的桌面宽度。 接下来，<title> 元素为浏览器提供页面的标题。 <link> 元素加载到页面样式中。 前三个从 Google Fonts 加载字体 Inconsolata，最后一个加载您将在本教程中编写的样式。

接下来，页面将需要设置样式的内容。 您将使用 Cupcake Ipsum 中的示例内容作为填充文本以与样式一起使用。 在整个教程中，将突出显示前面步骤中添加的代码。 在文本编辑器中返回 index.html 并添加以下代码块中突出显示的 HTML：

索引.html 

<!doctype html>
<html>
  <head>
    ...
  </head>
  <body>
    <main>
      <h2>City Night</h2>
      <p> Candy bonbon carrot cake jelly beans shortbread fruitcake. Donut lollipop shortbread soufflé cotton candy cupcake cake. Pastry bear claw powder shortbread gingerbread.</p>
      <p>Caramels jelly-o marshmallow muffin macaroon bear claw candy canes gummies. Muffin shortbread sweet roll pastry marzipan pudding.</p>
      <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>
    </main>
  </body>
</html>

<main> 元素包含页面的主要内容，<h2> 文本标题为 City Night，后跟三个 <p> 内容元素。 在学习本教程时，您将在内容之间的页面中添加图像。

将更改保存到 index.html，然后在同一目录中创建一个名为 styles.css 的文件。 在文本编辑器中打开此文件。 在您的 styles.css 文件中，添加来自以下代码块的 CSS：

样式.css 

body {
  margin: 0;
  font: 100% / 1.5 Inconsolata, monospace;
  color: hsl(230, 100%, 95%);
  background-color: hsl(230, 40%, 10%);
}

h2 {
  font-size: 3.5rem;
  font-weight: 300;
  text-shadow: 0 0 1em hsla(320, 100%, 50%, 0.5),
    0 0 0.125em hsla(320, 100%, 60%, 0.5),
    -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.125),
    0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.25);
}

main {
  margin: 2rem auto 4rem;
  width: 90%;
  max-width: 70rem;
}

p {
  font-size: 1.25rem;
  max-width: 75ch;
}

这些样式为页面添加了视觉美感和布局。 body 规则集调整默认值以加载 Inconsolata 字体，然后将颜色更改为浅蓝色，将背景颜色更改为深蓝紫色。 接下来，h2 标题被调整大小，使用更细的字体粗细，并通过使用 text-shadow 属性获得独特的效果。 main 元素被设置为保持在页面的中心，一旦达到 70rem 的大小（大约为 1120 像素）就停止宽度增长。 最后，p 选择器将 font-size 设置为 1.25rem 并设置一个单独的 max-width 为 75ch，即 75 个字符在当前的字体大小。

将您的更改保存到 styles.css，然后打开您的网络浏览器。 选择 File 菜单项，然后选择 Open 选项并在浏览器中加载您的 index.html 文件。 下图演示了此 HTML 将如何在浏览器中呈现：

在本节中，您为本教程创建了初始 HTML 和 CSS。 您在页面上加载了自定义字体并使用 text-shadow 属性创建了独特的标题。 在下一节中，您将使用 <img /> 元素将您的第一个图像添加到页面，了解其默认浏览器样式，并将页面上的图像设置为响应式。

使用 <img /> 元素设置流体宽度

在网络上处理图像时需要注意几件事。 首先，默认情况下，图像以逐个像素的方式显示在页面上。 这意味着如果图像的高和宽为 2048 像素，它将在浏览器上占据那么多空间，通常会导致水平和垂直滚动。 接下来，图像被视为内嵌流内容，这意味着图像在浏览器中被视为文本，并且可以内嵌放置。 当使用 float 属性将文本环绕在图像周围时，这可能很有用，但最好将图像与文本内容分开以改善最终布局。

要开始处理网页中的图像，请通过在命令提示符下运行以下命令来创建一个名为 images 的新目录： 

mkdir images

接下来，您将下载 Luke Stackpoole 的 带有色彩鲜艳的门 的建筑物的照片。 此图片来自图库摄影网站 Unsplash。 运行以下 curl 命令将照片下载到新的 images 目录中： 

curl -sL https://assets.digitalocean.com/articles/68128/night-doors.jpg -o images/night-doors.jpg

现在您的计算机上已经有了可以使用的图像，请在文本编辑器中打开 index.html。 在内容的第一段之后，添加一个带有 src 属性的 <img /> 自闭合元素，如以下代码块中突出显示的那样：

索引.html 

...
<main>
  <h2>City Nights</h2>
  <p>Candy bonbon carrot cake jelly beans shortbread fruitcake. Donut lollipop shortbread soufflé cotton candy cupcake cake. Pastry bear claw powder shortbread gingerbread.</p>
  <img src="images/night-doors.jpg" />
  ...
</main>
...

src 属性将浏览器定向到您从 Unsplash 下载的图像。

使用图像的一个非常重要的方面是提供带有图像描述的 alt 属性。 这将帮助您网站的各种用户了解图像内容，尤其是那些使用屏幕阅读器的用户。 提供有关图像上下文的详细信息很有帮助，尤其是当它与文本内容的其余部分有关时。 如果图像纯粹用于装饰目的，则可以接受将 alt 属性设置为空字符串，否则屏幕阅读器会读取文件名。

以下代码块中突出显示的 HTML 提供了此图像的 alt 文本描述：

索引.html 

...
<img src="images/night-doors.jpg" alt="Three floors of several brightly-colored doors with a person walking on the second floor" />
...

将添加的图像保存到 index.html，然后在 Web 浏览器中打开文件。 图像将在第一段和第二段之间加载。 调整浏览器大小不会对图像产生影响，如下动画所示：

如本节开头所述，无论屏幕尺寸如何，图像都以其原始尺寸显示。 为了使该图像适合更多屏幕尺寸，您接下来将赋予图像流体尺寸。 流体图像媒体是 响应式网页设计 的一个关键原则，这是一种强调代码以适应屏幕或浏览器大小限制的 Web 开发方法。

要定义流体图像，请在文本编辑器中打开 styles.css。 创建一个 img 元素选择器，然后添加一个值为 100% 的 max-width 属性，如以下代码块中突出显示的那样：

样式.css 

..
p {
  font-size: 1.25rem;
  max-width: 75ch;
}

img {
  max-width: 100%;
}

max-width 属性告诉图像可以按比例缩小以适应空间。 它还允许图像增长，直到达到原始像素大小。 这与使用设置为 100% 的 width 属性不同，如果容器比图像大，这将允许图像超出原始大小。 此外，浏览器的默认行为是按比例缩放图像，因此不需要 height 属性。

将更改保存到 styles.css，然后返回浏览器并刷新 index.html。 调整浏览器的大小，使图像按比例缩小和备份，直到达到其完整像素大小。 以下动画描述了如何在浏览器中呈现这种调整大小的交互：

在本节中，您使用了 <img /> 标记并在页面上成功加载了图像。 您在图像上使用了 alt 属性并应用了图像的充分描述。 最后，您尝试了一种调整所有图像大小以适应可用空间的方法。 在下一节中，您将使用 <figure> 和 <figcaption> 元素并更改它们的默认样式值。

使用 <figure> 和 <figcaption> 提供字幕

通常，图像需要附带描述性文本，以便为读者提供有关图像的更多背景信息，例如图像中的人物或图像的来源。 对于这种情况，将 <img /> 放在带有 <figcaption> 元素的 <figure> 元素中以保存描述性文本很有用。 在本节中，您将使用这些元素并调整它们的默认样式，以将文本覆盖在 Jezael Melgoza 的东京 街道的 照片上。

首先，在以下代码块中运行 curl 命令，将图像下载到 images 目录： 

curl -sL https://assets.digitalocean.com/articles/68128/tokyo-street.jpg -o images/tokyo-street.jpg

接下来，在文本编辑器中打开 index.html。 在第二段和第三段之间，添加一个 <figure> 元素。 在 <figure> 中，添加一个 <img /> 元素，其 src 属性指向您刚刚下载的图像。 然后，添加描述照片内容的 alt 文本。 这些更新在以下代码块中突出显示：

索引.html 

...
<p>Caramels jelly-o marshmallow muffin macaroon bear claw candy canes gummies. Muffin shortbread sweet roll pastry marzipan pudding.</p>

<figure>
  <img src="images/tokyo-street.jpg" alt="A motion blurred street with an in-focus taxi." />
</figure>

<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>
...

保存这些更新，然后返回浏览器加载 index.html。 图像显示在第二段和第三段之间，但由于默认样式应用了一些插入间距，如下图所示：

<figure> 的额外间距通过元素左侧和右侧的 margin 属性应用。 这是大多数浏览器上的默认样式，它在左侧和右侧放置 40px 边距，在顶部和底部放置 1em 边距。

要调整此默认样式，请在文本编辑器中返回 styles.css。 创建一个新的 figure 元素选择器并在其中添加一个 margin 属性设置为 2rem 0，如以下代码块中突出显示的那样：

样式.css 

...
img {
  max-with: 100%;
}

figure {
  margin: 2rem 0;
}

将 margin 设置为 2rem 0 会将 2rem 间距应用到 figure 的顶部和底部，并移除两侧的间距。 这使图像在文本之间有更多空间，但允许它占用更多空间。

保存对 styles.css 的更改并返回浏览器刷新页面。 下图显示了 figure 间距现在是如何渲染的：

接下来，要为图像添加标题，请在文本编辑器中返回 index.html。 在 <figure> 元素内部和 <img /> 元素下方，添加一个 <figcaption> 标记。 以下代码块中突出显示的 HTML 使用标题文本演示了此设置：

索引.html 

...
<figure>
  <img src="images/tokyo-street.jpg" alt="A motion blurred street with an in focus taxi." />
  <figcaption>Taxi in Tokyo, Japan</figcaption>
</figure>
...

标题的内容有助于提供关于图像不明显的更多信息。 这与 alt 文本不同，后者用文字描述图像的内容。 在这种情况下，有用的标题是拍摄照片的位置。

由于 HTML 顺序，<figcaption> 内容将显示在图像下方，但接下来您将对其进行样式设置，使其以深色渐变覆盖图像，以帮助使文本清晰易读。

在文本编辑器中返回 styles.css。 为了创建覆盖，需要将 position: relative 属性值添加到 figure 选择器。 然后，创建一个 figcaption 元素选择器并添加以下突出显示的 CSS：

样式.css 

...
figure {
  margin: 2rem 0;
  position: relative;
}

figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5rem 1rem 1rem;
  background: linear-gradient(to top, hsla(230, 40%, 5%, 0.95), hsla(230, 40%, 5%, 0));
}

figcaption 样式将容器设置为使用 position、bottom、right 和 left 属性覆盖图像的底部。 接下来，padding 属性在顶部较大，5rem 为渐变在文本内容上方传播提供足够的空间，左侧、右侧和底部具有较小的 [ X193X] 间距。 最后，您使用 background 属性的 linear-gradient() 值创建渐变，该值在 95% o 时为深蓝色，直到与 0% o 时相同的颜色。 总之，这会在底部创建一个阴影边缘以包含标题。

保存对 styles.css 的更改并返回浏览器刷新页面。 <figcaption> 的渐变背景显示在图像的底部，但它超出了底部和右侧的图像。 下图显示了图像和渐变之间差异的特写视图：

有两个不同的问题会导致这种错位，这需要两种方法来调整样式并纠正问题。

第一个处理 <img /> 元素在默认情况下如何被视为内联文本。 底部的这个额外空间是 line-height 间距，它在文本行之间留出空间。 有两种调整方法，通过更改 <figure> 元素的 line-height 或将 <img> 设置为将 display 属性设置为 [X154X ]。

第二个问题是图像的像素到像素尺寸与 <main> 元素的 max-width 之间的大小差异。 由于 <figure> 是 block 元素，并且 <figcaption> 设置为从左边缘到右边缘，它会增长以填充比图像更大的空间。 解决此问题的第一种方法是将 <img /> 更改为将 width 设置为 100%。 通过设置此 width，图像将忽略 max-width: 100% 默认值，而是填充整个空间。 请注意，这种方法可能会导致图像失真，具体取决于大小的差异。 解决此问题的第二种策略是将 <figure> 更改为将 display 属性设置为 inline-block。 这种方法将导致 <figure> 元素的大小缩小以适应其内容。

在文本编辑器中返回 styles.css 并为每个问题添加 display 方法。 在 figure 选择器中，添加一个 display 属性设置为 inline-block 的值。 然后，使用 display: block 创建一个 figure img 后代组合选择器，如以下代码块中突出显示的那样：

样式.css 

...
figure {
  margin: 2rem 0;
  position: relatve;
  display: inline-block;
}

figure img {
  display: block;
}

figcaption {
  ...
}

将更改保存到 styles.css，然后在 Web 浏览器中刷新 index.html。 <figure> 缩小到图像的自然大小，图像不再被视为文本。 下图显示了如何呈现对 display 属性的这种调整：

在本节中，您使用了 <figure> 和 <figcaption> 元素。 您了解了 <figure> 和 <img /> 元素的默认样式以及如何更改它们以获得更可控的结果。 最后，您创建了一个标题，用有关照片的上下文信息覆盖图像。 在最后一节中，您将使用 object-fit 和 object-position 属性设置 <picture> 元素的样式。

将响应式图像交换与 <picture> 一起使用

在处理各种屏幕尺寸的图像时，有时图像尺寸不合适，需要适应布局。 <picture> 元素通过定义不同的图像以不同的屏幕尺寸显示来满足这一需求。 然后可以使用 object-fit 和 object-position 属性更严格地控制图像，这些属性设置图像在特定尺寸之间的缩放方式。

要开始使用 <picture> 元素，您将需要同一源图像的一系列不同大小的图像。 使用以下 curl 命令下载由 Pawel Nolbert 拍摄的东京 的同一张 航拍照片的三个图像的 zip 存档： 

curl -sL https://assets.digitalocean.com/articles/68128/picture.zip -o images/picture.zip

zip 文件下载完成后，将内容解压缩到您的图像文件夹。 在提示符下运行以下命令，将文件放在 images 目录中： 

unzip images/picture.zip -d ./images

现在，在文本编辑器中打开 index.html。 首先，您将创建一个 <div>，在 <body> 和 <main> 元素之间具有 hero 的 class 属性。 然后从以下代码块中添加剩余的突出显示的 <picture> 元素：

索引.html 

...
<body>
  <div class="hero">
    <picture>
      <source srcset="images/tokyo-large.jpg" media="(min-width:70rem)" />
      <source srcset="images/tokyo-medium.jpg" media="(min-width:40rem)" />
      <img class="hero-image" src="images/tokyo-small.jpg" alt="Time-lapse exposure of a city at night." />
    </picture>
  </div>
  <main>
...

<picture> 元素需要一个特定的结构，该结构由所需数量的 <source /> 元素和一个 <img /> 元素作为内部的最后一项。 <picture> 元素的所有可访问性和样式都来自 <img /> 元素，这就是为什么 <img /> 有 class 和 [X148X ] 才不是。

<img /> 是在没有媒体查询要求时用于启动的默认图像。 <source /> 元素定义了两件事：具有 srcset 属性的图像文件的位置，以及具有 media 属性的屏幕大小场景。 然后，浏览器将访问并加载指定屏幕尺寸的适当图像，如果尺寸发生变化，则换出图像。

将更改保存到 index.html，然后在 Web 浏览器中打开文件。 以下动画描述了随着窗口大小的增加浏览器交换图像：

随着屏幕大小的变化，图像大小也会发生变化，导致下面的文本被推到页面的下方。 为了在这个英雄图像区域和内容之间创建一致的间距，可以设置 height 属性以保持一致的大小。

在文本编辑器中返回 styles.css。 在页面底部，为 .hero 创建一个类选择器。 在选择器块中，添加以下代码块中突出显示的 CSS：

样式.css 

...
.hero {
  height: 80vh;
  max-height: 40rem;
}

将 height 值设置为 80vh 意味着 .hero 容器将至少占用浏览器屏幕高度的 80% of。 然后 max-height 属性确保 .hero 不会增长到大于 40rem，相当于 640 像素高。

将更改保存到 styles.css 并在浏览器中刷新 index.html。 如以下动画所示，文本现在保持一致的位置。 同时图像和内容之间的视觉距离调整到图像滑到文本后面的点：

文本和图像的这种重叠是浏览器在内容保持可见的一侧犯错的结果，即使它超出了其祖先的容器。 对此的快速解决方法是在 .hero 元素上应用 overflow: hidden，但这并不能解决图像缩小时的额外空间问题。 要为这两个问题创建解决方案，object-fit 属性可以通过为图像提供与具有 background-size 属性的背景图像类似的控件来提供帮助。

要开始使用 object-fit，请在文本编辑器中返回 styles.css。 由于 <img /> 元素是控制 <picture> 元素样式的元素，因此为 .hero-image 创建一个类选择器并从以下代码块中添加突出显示的 CSS：

样式.css 

...
.hero {
  height: 80vh;
  max-height: 40rem;
}

.hero-image {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

为了使用 object-fit 属性，图像需要能够垂直和水平增长。 通过将 height 和 width 属性设置为 100%，您可以让 object-fit 属性完全控制调整图像的大小。 如果没有 object-fit 属性，图像将被压缩以适应父容器。 cover 值允许图像在垂直或水平方向边到边，具体取决于容器的方向。 object-fit 属性可以接受与 background-size 属性相同的值，包括 contain 和尺寸值。

将此新增内容保存到 styles.css 并在 Web 浏览器中刷新 index.html。 下面的动画说明了 object-fit 属性如何让图像增长到填充 .hero 容器的整个空间，并在它穿过容器边缘时被隐藏，就像背景图像一样：

最后，还有 object-position 属性。 这类似于 background-position 属性，以允许将图像锚定到特定区域。

在文本编辑器中返回 styles.css 并将 object-position 属性添加到 .hero-image 选择器。 将该属性的值设置为 bottom right，这将在调整大小时将图像锚定到右下角区域。 以下代码块中突出显示的 CSS 演示了它是如何编写的：

样式.css 

...
.hero-image {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: bottom right;
}

将此更改保存到 styles.css，然后返回浏览器并刷新 index.html。

这次随着浏览器宽度的变化和图像的缩放，缩放源于容器的中心，如下面的动画所示：

本节向您介绍了 <picture> 媒体元素、object-fit 属性和 object-position 属性。 您使用这种元素和属性的组合在页面顶部创建了一个调整大小和调整的大图像。

结论

借助您在本教程中练习的技术，您现在可以编写样式来格式化图像以适合您的设计和布局。 您通过将全局 max-width: 100% 设置为页面上的所有 <img /> 元素来创建响应式图像。 接下来，您格式化图像标题以覆盖图像并随图像增大和缩小。 然后，您使用 <picture> 元素以及 object-fit 和 object-position 属性来交换和缩放图像以最适合屏幕尺寸。 使用这些策略将帮助您解决涉及图像和页面布局的更复杂的情况。

如果您想阅读更多 CSS 教程，请尝试 如何使用 CSS 设置 HTML 样式系列 中的其他教程。

取自“https://cainiaojiaocheng.com/index.php?title=如何使用CSS设置图形和图像HTML元素的样式&oldid=32152”
Powered by MediaWiki