返回

图片九宫格超出展示DEMO实现,用counter实现超值效果

前端

用CSS counter实现图片九宫格超出展示效果，既简单易行又低成本，很容易上手。喜欢图片布局和制作的朋友，可以尝试下CSS counter实现的这个超出展示效果，在众多图片展示效果的布局方法中，这绝对是一个简单又美观的一个小方法。感兴趣的朋友可以花几分钟学习一下，肯定会有意想不到的收获。

counter 实现图片九宫格超出效果步骤

为了让大家能够快速实现图片九宫格超出展示效果，小编特意整理了实现步骤：

  1. 创建一个 HTML 文档并添加以下代码：
<!DOCTYPE html>
<html>
<head>
  
  <style>
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 10px;
    }

    .grid-item {
      width: 100%;
      height: 100%;
      background-color: #ccc;
    }

    .counter {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 24px;
      color: #fff;
    }
  </style>
</head>
<body>
  <div class="grid">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="counter">9+</div>
  </div>
</body>
</html>

  1. 将图片添加到 grid-item 元素中。您可以使用 HTML <img> 标签或 CSS background-image 属性来添加图片。

  2. 调整 grid-template-columns 属性以更改网格的列数。

  3. 调整 grid-gap 属性以更改网格中的间隙。

  4. 调整 counter 元素的样式以更改计数器的样式。

效果演示

完成上述步骤后，您应该会看到一个 3x3 的图片网格。当您将鼠标悬停在网格上时，您应该会看到一个计数器，显示网格中图片的总数。

您可以在 CodePen 上查看该效果的完整演示：

CodePen 演示

兼容性

该效果可以在现代浏览器中使用，包括 Chrome、Firefox、Safari 和 Edge。

优点

使用 CSS counter 实现图片九宫格超出展示效果有很多优点，包括：

  • 简单易行：该效果很容易实现，即使您是 CSS 初学者。
  • 低成本：该效果不需要任何 JavaScript 或复杂的代码。
  • 响应式：该效果是响应式的，可以在任何设备上正常工作。
  • 可定制：您可以自定义网格的列数、间隙和计数器的样式。

总结

使用 CSS counter 实现图片九宫格超出展示效果是一种简单、低成本且响应式的方法。该效果可以在现代浏览器中使用，并且很容易实现。