定位 <a> 标签但不包括溢出位置：绝对图像

问题描述

所以，很难解释，但我试图在整个抽象背景上放置一个链接，但不包括放置在顶部的其他图像的溢出。我已经尝试了我能想到的所有方法，但无法提出解决方案。将所有图像包装在标签中，我无法弄清楚如何将其大小调整为仅包含抽象背景图像边框。只包裹抽象背景和文字，不能让它包含叠加的图像（当然在抽象背景的边界内）。

我是否正在努力完成不可能的事情？

img {
    max-width: 100%;
}

.cat-item-container {
    display: flex;
    flex-wrap: wrap;
    padding-top: 50px;
}

.category-heading {
    width: 100%;
    text-align: center;
}

.cat-item {
    width: 44%;
    margin: 5% 3%;
    position: relative;
}

.cat-background-img {
    position: relative;
    border-radius: 20px;
}

.cat-background-orange {
    filter: hue-rotate(74deg);
}

.cat-item-img {
    position: absolute;
    z-index: 999;
    bottom: 50%;
    width: 70%;
}

.cat-title-container {
    position: absolute;
    z-index: 9999;
    bottom: 20%;
    left: 5%;
}

.cat-title {
    color: white;
    font-weight: 600;
    font-size: 4vw;
    text-shadow: 0px 0px 7px #3e3e3e;
    margin: 0;
}

.cat-item a {
    display: block;
}

@media screen and (min-width: 1200px) {
    .cat-title {
        font-size: 48px;
    }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="shop-by-category container">
    <div class="category-heading">
        Shop by Category
    </div>
    <div class="cat-item-container">
            <div class="cat-item">
            <a href="/category/water-slides/">
                <img class="cat-item-img water-slide" src="//files.sysers.com/cp/upload/vzcpr/editor/full/blue-marble-water-slide.png">
                <img class="cat-background-img cat-background-orange" src="//files.sysers.com/cp/upload/vzcpr/editor/full/cat-background-orange.jpg">
                <div class="cat-title-container">
                    <p class="cat-title">Water Slides</p>
                </div>
            </a>
            </div>
            <div class="cat-item">
                <img class="cat-item-img combo-house" src="//files.sysers.com/cp/upload/vzcpr/editor/full/Tiki-bounce-combo.png">
            <a href="/category/bounce-and-slide-combos/">
                <img class="cat-background-img" src="//files.sysers.com/cp/upload/vzcpr/editor/full/cat-background-pink.jpg">
                <div class="cat-title-container">
                    <p class="cat-title">Combo Houses</p>
                </div>
            </a>
            </div>
            <div class="cat-item">
                
                <img class="cat-item-img bounce-house" src="//files.sysers.com/cp/upload/vzcpr/editor/full/castle-no-background.png">
                <img class="cat-background-img " src="//files.sysers.com/cp/upload/vzcpr/editor/full/cat-background-blue.jpg">
                <div class="cat-title-container">
                    <a href="/category/bounce-houses/"><p class="cat-title">Bounce Houses</p></a>
                </div>
            </div>
    </div>
</div>

https://jsfiddle.net/61Lh3cyx/

解决方法

要阻止 imgs 的“顶部”成为链接的一部分，您可以移动锚元素，使其不是 img 或相关文本的父元素。将其移动到文本元素的正下方，并使其位置绝对，与项目和背景颜色透明的高度和宽度相同。

这样就不会包括图像的突出部分，但整个项目的其余部分都被覆盖了，因此您不会在 img 所在的位置出现间隙。

img {
  max-width: 100%;
}

.cat-item-container {
  display: flex;
  flex-wrap: wrap;
  padding-top: 50px;
}

.category-heading {
  width: 100%;
  text-align: center;
}

.cat-item {
  width: 44%;
  margin: 5% 3%;
  position: relative;
}

.cat-background-img {
  position: relative;
  border-radius: 20px;
}

.cat-background-orange {
  filter: hue-rotate(74deg);
}

.cat-item a {
  position: absolute;
  background-color: transparent;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
}

.cat-item-img {
  position: absolute;
  z-index: 999;
  bottom: 50%;
  width: 70%;
}

.cat-title-container {
  position: absolute;
  z-index: 9999;
  bottom: 20%;
  left: 5%;
}

.cat-title {
  color: white;
  font-weight: 600;
  font-size: 4vw;
  text-shadow: 0px 0px 7px #3e3e3e;
  margin: 0;
}

.cat-item a {
  display: block;
}

@media screen and (min-width: 1200px) {
  .cat-title {
    font-size: 48px;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="shop-by-category container">
  <div class="category-heading">
    Shop by Category
  </div>
  <div class="cat-item-container">
    <div class="cat-item">
      <img class="cat-item-img water-slide" src="//files.sysers.com/cp/upload/vzcpr/editor/full/blue-marble-water-slide.png">
      <img class="cat-background-img cat-background-orange" src="//files.sysers.com/cp/upload/vzcpr/editor/full/cat-background-orange.jpg">
      <div class="cat-title-container">
        <p class="cat-title">Water Slides</p>
      </div>
      <a href="/category/water-slides/"></a>
    </div>
    <div class="cat-item">
      <img class="cat-item-img combo-house" src="//files.sysers.com/cp/upload/vzcpr/editor/full/Tiki-bounce-combo.png">
      <img class="cat-background-img" src="//files.sysers.com/cp/upload/vzcpr/editor/full/cat-background-pink.jpg">
      <div class="cat-title-container">
        <p class="cat-title">Combo Houses</p>
      </div>
      <a href="/category/bounce-and-slide-combos/">
      </a>
    </div>
    <div class="cat-item">

      <img class="cat-item-img bounce-house" src="//files.sysers.com/cp/upload/vzcpr/editor/full/castle-no-background.png">
      <img class="cat-background-img " src="//files.sysers.com/cp/upload/vzcpr/editor/full/cat-background-blue.jpg">
      <div class="cat-title-container">
          <p class="cat-title">Bounce Houses</p>
      </div>
        <a href="/category/bounce-houses/"></a>
    </div>
  </div>
</div>