响应式网格图块覆盖[重复]

Posted 2023-03-05

【中文标题】响应式网格图块覆盖[重复]

【英文标题】：Responsive grid tile overlay [duplicate]

【发布时间】：2020-06-25 08:39:30

【问题描述】：

我有这个网格，（通常）您可以在其中选择一个图块。选定的图块应该具有透明的蓝色覆盖层。当调整网格宽度时，如何在网格中制作图像叠加层并保持其容器的宽度？

这样：

我制作了.tile__overlay position: absolute;，乍一看还不错。但这意味着我失去了响应能力，这意味着当图块小于其最大尺寸时，叠加层不会调整到其父尺寸。

.grid 
  display: grid;
  grid-gap: 6px;
  max-width: 306px;
  grid-template-columns: minmax(min-content, 150px) minmax(min-content, 150px);


.tile 
  padding: 0;
  border: 0;
  max-height: 150px;
  max-width: 150px;


.tile__image 
  height: 100%;
  width: 100%;
  max-height: 150px;
  max-width: 150px;
  display: block;
  object-fit: contain;


.tile__overlay 
  width: 100%;
  height: 100%;
  background-color: rgba(29, 151, 255, 0.9);

<div class="grid">
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/1/150/150.jpg" >
  </button>
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/18/150/150.jpg" >
  </button>
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/33/150/150.jpg" >
    <div class="tile__overlay" />
  </button>
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/47/150/150.jpg" >
  </button>
</div>

【问题讨论】：

我昨天对此发表了评论，并为您提供了一个工作示例。 codesandbox.io/s/… 。提示是：绝对/相对。我什至添加了一个计数器来显示您可以在中间添加文本您的副本：***.com/questions/60662044/responsive-grid-overlay，您可以使用此处的代码进行编辑，因此可以重新打开它

【参考方案1】：

为下面提到的添加了 CSS

button.tile:after 
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: hsla(240, 100%, 50%, 0.5411764705882353);
    z-index: 999;
    content: '';

.tileposition:relative;

.grid 
  display: grid;
  grid-gap: 6px;
  max-width: 306px;
  grid-template-columns: minmax(min-content, 150px) minmax(min-content, 150px);


.tile 
  padding: 0;
  border: 0;
  max-height: 150px;
  max-width: 150px;


.tile__image 
  height: 100%;
  width: 100%;
  max-height: 150px;
  max-width: 150px;
  display: block;
  object-fit: contain;


.tile__overlay 
  width: 100%;
  height: 100%;
  background-color: rgba(29, 151, 255, 0.9);


button.tile:after 
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: hsla(240, 100%, 50%, 0.5411764705882353);
    z-index: 999;
    content: '';

.tileposition:relative;

<div class="grid">
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/1/150/150.jpg" >
  </button>
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/18/150/150.jpg" >
  </button>
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/33/150/150.jpg" >
    <div class="tile__overlay" />
  </button>
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/47/150/150.jpg" >
  </button>
</div>

【参考方案2】：

使用pseudo 代码，您可以轻松实现此目的。我还为视觉效果添加了活动类， 您可以在以下课程中随意使用颜色tile:hover::after

.grid 
  display: grid;
  grid-gap: 16px;
  max-width: 306px;
  grid-template-columns: minmax(min-content, 150px) minmax(min-content, 150px);


.tile 
  padding: 0;
  border: 0;
  max-height: 150px;
  max-width: 150px; 
  position: relative;
  border: 1px solid transparent;


.tile__image 
  height: 100%;
  width: 100%;
  max-height: 150px;
  max-width: 150px;
  display: block;
  object-fit: contain;


.tile:hover::after,
.tile:active::after,
.tile:focus::after,
.tile.active::after
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(29, 151, 255, 0.57);
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-shadow: 0px 0px 5px 5px #6BA1F9;
    border: 1px solid #ffffffab;
    border-radius: 4px;

<div class="grid">
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/1/150/150.jpg" >
  </button>
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/18/150/150.jpg" >
  </button>
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/33/150/150.jpg" >
    <div class="tile__overlay" />
  </button>
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/47/150/150.jpg" >
  </button>
</div>