CSS 中的图像叠加指南

pxr007

于 2023-08-26 17:07:01 发布

阅读量1.6k

点赞数

文章标签： tensorflow 人工智能 python

本文链接：https://blog.csdn.net/weixin_47967031/article/details/132513655

版权

叠加是用于在图像顶部创建附加图层的效果。它们的目的可能是为了美观或提高文本可读性，特别是对于视力受损的人。

CSS 中的图像叠加指南

我们通常在 CSS 中创建叠加层，以获取文本、图标或其他图像后面的图像。本指南将向您展示如何在 CSS 中的背景图像和常规元素上很好地应用叠加层。我们将介绍：

CSS 中的定位布局功能

探索元素的各种图像叠加 CSS 效果

CSS 中的定位布局功能

在图像上创建叠加的技术涉及了解 CSS 布局功能，如何在Eclipse中配置Java？详细图文教程分享如定位。使用常规元素时，此布局功能可以方便地将框元素或其他元素作为叠加层放置在图像顶部。``

让我们看一个简单的例子。以下 HTML 在容器元素中具有图像和一些标题文本：li

<li class="image_wrapper">
  <img src="https://source.unsplash.com/VWcPlbHglYc" alt="" />
  <div class="overlay">
    <h3>Position absolute place this heading on top of the image</h3> 
  </div>
</li>

当然，每个元素都是一个框，按照它们在源代码中出现的顺序排列。例如，上述代码中的元素将显示在标题文本之前。

现在，在我们希望文本出现在图像顶部的情况下，我们将通过使用 CSS 属性覆盖其正常文档流来更改文本元素或其容器的默认行为，如下所示：position

.image_wrapper {
  position: relative;
}

.overlay {
  position: absolute; 
  left: 0;
  top: 0;
}

通过在文本容器元素上添加 and 声明，我们可以将标题文本从文档流中移出到相对于父包装器的位置，如下所示：position: absolute;lefttop

考虑到这个定位功能，我们可以开始实现图像叠加。

探索元素的各种图像叠加 CSS 效果

我们可以在上图中看到的一件事是，上面的文本不可读，因此不利于用户体验。为了提高用户满意度，我们将添加叠加层以确保文本的可读性。

从下一节开始，我们将创建具有各种效果的不同图像叠加层。如何在MySQL工作台中创建数据库？包含示例教程你可以在这里看到Codepen上的项目：

带有文本背景颜色的简单 CSS 图像叠加

文本叠加可以像在文本后面添加背景颜色一样简单。让我们看一下以下标记：

<li class="image_wrapper">
  <img src="https://source.unsplash.com/VWcPlbHglYc" alt="" />
  <div class="overlay overlay_0">
    <h3>10% OFF</h3> 
  </div>
</li>

我们可以像在第一个示例中一样将文本放置在图像上，然后添加背景颜色：

.image_wrapper {
  position: relative;
}

img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute; 
}

.overlay_0 {
  left: 0;
  top: 0;
  padding: .5rem;
  margin: 4px;
  background: #f4208f;
}

输出现在如下所示：

这种叠加效果在电子商务网站上很常见，趣知笔记用于促销标签和其他类似用途。

覆盖部分图像的半透明标题文本叠加

另一种流行的叠加样式在半透明背景上具有标题或图像标题。请考虑以下标记：

<li class="image_wrapper">
  <img src="https://source.unsplash.com/VWcPlbHglYc" alt="" />
  <div class="overlay overlay_1">
    <h3>Image title</h3> 
  </div>
</li>

使用叠加层上的、、声明，我们可以将叠加文本放在图像的底部：position: absolute;left: 0;bottom: 0;

.overlay {
  position: absolute; 
  background: rgba(57, 57, 57, 0.5);

  /* center overlay text */
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay_1 {
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 1rem;
}

我们还在叠加层上应用了半透明背景。请参阅下面的输出：

为了美观起见，我们还应用了弹性框属性将图像标题放置在中心。

上面的示例非常适合同时关注图像和叠加文本。趣知笔记网站地图但是，当焦点更多地放在文本而不是图像上时，我们可能会拉伸叠加层以覆盖整个图像。

覆盖整个图像的半透明叠加层

请考虑以下标记：

<li class="image_wrapper">
  <img src="https://source.unsplash.com/VWcPlbHglYc" alt="" />
  <div class="overlay overlay_2">
    <h3>Image title</h3> 
  </div>
</li>

在覆盖元素上，我们将使用、、和声明来拉伸覆盖层，因此它覆盖了整个图像：toprightbottom``left

.overlay_2 {
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

我们还可以使用一个声明作为简写来替换上面的 CSS 规则：

.overlay_2 {
  inset: 0;
}

分配给的值将应用于所有边。输出现在应如下所示：inset

请记住，在前面的示例中，我们在叠加层上应用了 flexbox 属性，以将文本放置在中心。由于半透明叠加现在覆盖了整个图像，因此文本在整个图像上也垂直和水平居中。

使用 CSS 悬停时显示图像叠加效果

让我们学习如何仅在用户将鼠标悬停在图像上时才显示叠加层。我们还将添加幻灯片和缩放效果。

图像叠加在悬停时显示具有缩放效果的文本

对于此示例，我们将使用以下 HTML 标记：

<li class="image_wrapper">
  <img src="https://source.unsplash.com/VWcPlbHglYc" alt="" />
  <div class="overlay overlay_3">
    <h3>Image title</h3> 
  </div>
</li>

除了通常的覆盖样式声明之外，以下 CSS 规则还包括、和属性：transformtransitionbackdrop-filter

.overlay_3 {
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 1rem;
  transform: scale(0);
  transition: all .3s ease-in-out;
  backdrop-filter: blur(8px) brightness(80%);
}

.image_wrapper:hover .overlay_3 {
  transform: scale(1);
}

将值从悬停更改为悬停可提供叠加文本放大视图的视觉效果。同时，允许我们在叠加层后面应用模糊效果，以进一步提高文本可见性。最后，提供平滑的悬停效果。transform: scale()01backdrop-filtertransition

下面的 GIF 演示了悬停时的缩放效果：

图像叠加在悬停时显示带有幻灯片效果的文本

对于此示例，我们使用以下 HTML 标记：

<li class="image_wrapper">
  <img src="https://source.unsplash.com/VWcPlbHglYc" alt="" />
  <div class="overlay overlay_4">
    <h3>Image title</h3> 
  </div>
</li>

使用下面的 CSS 规则，当我们将鼠标悬停在图像上时，and 属性让我们可以实现向下滑动效果：bottom``height

.overlay_4 {
  left: 0;
  bottom: 100%;
  height: 0;
  width: 100%;
  overflow: hidden;
  backdrop-filter: blur(8px) brightness(80%);
  transition: all .3s ease-in-out;
}

.image_wrapper:hover .overlay_4 {
  bottom: 0;
  height: 100%;
}

下面的 GIF 演示了悬停时的幻灯片效果：

图像叠加在悬停时显示图标，具有缩放效果

与文本叠加类似，我们也可以在图像上显示图标。下面，我们将创建一个带有“字体真棒”图标的叠加层，当我们将鼠标悬停在图像上时会出现该图标。

对于此示例，我们将使用以下 HTML 标记：

<li class="image_wrapper">
  <img src="https://source.unsplash.com/VWcPlbHglYc" alt="" />
  <div class="overlay overlay_5">
    <a href="#" class="icon">
      <i class="fa-solid fa-camera"></i>
    </a>
  </div>
</li>

在 CSS 文件中，我们将导入 CDN，然后应用 CSS 规则，如下所示：font-awesome

@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css);

/* ... */

.overlay_5 {
  inset: 0;
  transform: scale(0);
  transition: all .3s ease-in-out;
}

.image_wrapper:hover .overlay_5 {
  transform: scale(1);
}

.icon i {
  border-radius: 50%;
  font-size: 40px;
  color: #8c9e54;
  width: 70px;
  height: 70px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

如您所见，图标覆盖的 CSS 实现类似于具有缩放效果的文本叠加。下面的 GIF 演示了悬停时的缩放效果：

悬停时显示的图像上方的图像具有缩放效果

与图标叠加层一样，我们也可以在悬停时将适当的图像显示在另一个图像上。我们可以在电子商务网站上找到此实现的用例，当我们将鼠标悬停在产品上时，会显示可变的产品图像，如下所示：

对于此示例，我们将使用以下 HTML 标记：

<div class="product-item">
  <div class="product-image">
    <a href="#">
      <img src="https://source.unsplash.com/GtOo17K-vTg" width="600" height="720">
      </a>
    <div class="hover-img">
      <a href="#">
        <img src="https://source.unsplash.com/3_XeNGVbTQA" width="600" height="720">
        </a>
    </div>
  </div>
  <h3>Product title</h3>
  <span>$100</span>
</div>

请参阅Codepen上的完整代码。

无论我们想要文本、图标还是图像叠加，创建叠加的方法都是相同的。

在上面的 HTML 标记中，我们将两个图像添加到同一个元素容器中。product-image

我们将为此容器提供一个属性。然后，我们将给覆盖的图像容器 - 即 - 一段时间，也使用或等效的，和。position: relative;hover-imgposition: absolute;inset: 0;toprightbottom``left

CSS 样式规则如下所示：

.product-item {
  text-align: center;
  width: 350px;
}

.product-image {
  position: relative;
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

.hover-img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease, transform 2s cubic-bezier(0,0,.44,1.18);
}

.product-image:hover .hover-img {
  opacity: 1;
  transform: scale(1.12);
}

将叠加图像放置在主图像上后，我们添加了隐藏它，以便它仅在悬停时显示。悬停时应用可提供叠加图像放大到视图中的视觉效果。同时，该属性提供了平滑的悬停效果。opacity: 0;opacity: 1;transform: scale(1.12);``transition

背景图像叠加

与元素不同，作为背景元素包含的图像将自动位于包含的文本或图标后面。这使得应用叠加变得容易，正如我们稍后将看到的那样。

我们将创建具有各种效果的不同背景图像叠加层，例如使用 CSS 函数应用渐变以及与 CSS 和属性混合。我们还将学习如何使用伪元素来创建漂亮的背景叠加层。linear-gradient()mix-blend-modebackground-blend-mode

你可以在Codepen上看到这个项目：

使用 CSS 的简单文本叠加的背景图像

对于此示例，我们将从以下 HTML 标记开始：

<section class="bg_image_1">
  <div class="content">
    <h2>Hero title</h2>
    <p>Hero description here</p>
  </div>
</section>

在容器元素上，我们将使用 CSS 添加背景图像：<section>

.bg_image_1 {
  background-image: url(https://source.unsplash.com/VWcPlbHglYc);
  background-size: cover;
  background-position: center;
 }

结果应如下所示：

为了美观起见，我们还应用了CSS网格属性将图像内容放置在中心。

正如预期的那样，文本叠加层的可读性不强。

让我们尝试通过在背景元素上应用较低的不透明度来提高文本叠加层的可见性，如下所示：

.bg_image_1 {
  /* ... */
  opacity: .3;
}

上面的添加会影响图像和包含的文本叠加，这更糟：

为了在不影响文本的情况下控制图像的不透明度，让我们看看使用伪元素的解决方案。

使用伪元素控制背景图像不透明度

使用此方法，我们将在伪元素上应用背景图像以解耦图像和文本内容：

.bg_image_1 {
  position: relative;
 }

.bg_image_1::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .4;
  background: pink;
  background-image: url(https://source.unsplash.com/VWcPlbHglYc);
  background-size: cover;
  background-position: center;
}

使用该属性时，背景相对于父元素放置，并显示在文本内容上。然后，我们应用负片来更改堆叠顺序并将背景图像移动到文本后面。inset``z-index

然后，使用伪元素上的属性，我们可以降低背景图像的对比度：opacity

现在，正如我们在图像中看到的，我们增加了文本叠加层的可见性。

使用该属性background-blend-mode

上面使用的伪元素方法可能有点复杂。使用 CSS 属性，我们可以用一小行代码在背景图像上应用叠加层。此属性会将背景图像与元素的背景色混合。background-blend-mode

对于此示例，我们将使用以下 HTML 标记：

<section class="bg_image_2">
  <div class="content">
    <h2>Hero title</h2>
    <p>Hero description here</p>
  </div>
</section>

然后，将背景图像的混合模式指定为：multiply

.bg_image_2 {
  background-color: steelblue;
  background-image: url(https://source.unsplash.com/VWcPlbHglYc);
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  color: #fff;
}

结果现在应如下所示：

如上所示，叠加效果是由于将背景图像与元素的背景颜色混合在一起。

使用 CSS 函数linear-gradient()

使用 CSS 函数，我们只需一行代码即可实现背景叠加。它易于实现，并且与混合模式方法一样，无需使用伪选择器。linear-gradient()

对于此示例，我们将使用以下 HTML 标记：

<section class="bg_image_3">
  <div class="content">
    <h2>Hero title</h2>
    <p>Hero description here</p>
  </div>
</section>

然后，我们将在背景图像上与背景 URL 一起添加线性渐变：

.bg_image_3 {
  background-image: linear-gradient(rgba(70, 130, 180, .8), rgba(178, 34, 34, .8)), url(https://source.unsplash.com/VWcPlbHglYc);

  background-size: cover;
  background-position: center;
  color: #fff;
}

结果应如下所示：

使用线性渐变，我们在两种半透明颜色之间逐渐过渡，以实现渐变叠加效果。

使用 CSS 属性mix-blend-mode

与属性一样，让我们将元素的内容与其父背景混合在一起。background-blend-mode``mix-blend-mode

让我们考虑以下标记：

<section class="bg_image_4">
  <div class="content content_4">
    <h2>Hero title</h2>
    <p>Hero description here</p>
  </div>
</section>

使用以下 CSS，我们在部分容器元素上添加了一个背景图像，并应用了一个伪选择器来重叠背景颜色叠加层：

.bg_image_4 {
  background-image: url(https://source.unsplash.com/VWcPlbHglYc);
  background-size: cover;
  background-position: center;
  color: #fff;
}

.content_4 {
  position: relative;
}

.content_4::after {
  content: '';
  position: absolute;
  background: #074f57;
  inset: 0;
  z-index: -1;
}

如果我们看一下结果，我们将得到如下所示的内容：

在叠加层上应用负片后，我们可能会期望背景颜色出现在文本后面。但是，它远远落后于背景图像。z-index

如果我们暂时删除背景图像，我们应该看到背景颜色：

.bg_image_4 {
  /* ... */
  background-size: cover;
  background-position: center;
  color: #fff;
}

删除背景图像的结果：

为了确保背景颜色位于文本后面而不是父背景图像后面，我们将在背景元素上使用 CSS 属性来创建新的堆叠上下文。isolation

让我们返回背景图像并添加属性：isolation

.bg_image_4 {
  background-image: url(https://source.unsplash.com/VWcPlbHglYc);
  background-size: cover;
  background-position: center;
  color: #fff;
  isolation: isolate;
}

此时，背景图像现在位于背景颜色后面。

现在，我们可以应用 on 伪选择器将背景颜色与其父背景图像混合：mix-blend-mode

.content_4::after {
  /* ... */
  mix-blend-mode: multiply;
}

结果现在应如下所示：

现在我们有一个漂亮的背景图像叠加层，其中文本可读。

结论

创建图像叠加在各种设计和方案中都很有用。在创建网页英雄部分、响应式图像库和许多其他用例时，它很方便。

本指南讨论了如何在CSS中的背景图像和常规元素上创建一个漂亮的叠加层。如果您喜欢本课程，请在网络上分享。最后，我们很想听听您最喜欢哪种叠加解决方案。请在评论部分告诉我们。

pxr007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS 中的图像叠加指南

叠加是用于在图像顶部创建附加图层的效果。它们的目的可能是为了美观或提高文本可读性，特别是对于视力受损的人。我们通常在 CSS 中创建叠加层，以获取文本、图标或其他图像后面的图像。本指南将向您展示如何在 CSS 中的背景图像和常规元素上很好地应用叠加层。我们将介绍：CSS 中的定位布局功能探索元素的各种图像叠加 CSS 效果。
复制链接

扫一扫