仅插入指向 div 的背景图像的链接，而不是指向 div 内的其他元素的链接答案

【问题标题】：Insert link only to the div's background image and not to the other elements inside div仅插入指向 div 的背景图像的链接，而不是指向 div 内的其他元素的链接
【发布时间】：2018-09-18 22:40:19
【问题描述】：

我想只插入一个指向 div 的背景图像而不是其他元素的链接，插入内联 css ！这是我的代码：

<div class="col-sm-4 box-home" style="background-image: url('URL-IMAGE');">

    <div id="spazio" style="height:55%;"></div>

    <div class="description" id="descr-one">
        <h2><?php the_field('titolo_il_box'); ?></h2>
        <p><?php the_field('descrizione_il_box'); ?></p>
    </div>
</div>

我想给背景图片添加一个链接。

如果我在这种模式下添加标签，链接所有div！

<a href="URL">

    <div class="col-sm-4 box-home" style="background-image: url('URL-IMAGE');">

        <div id="spazio" style="height:55%;"></div>

        <div class="description" id="descr-one">
            <h2><?php the_field('titolo_il_box'); ?></h2>
            <p><?php the_field('descrizione_il_box'); ?></p>
        </div>
    </div>

</a>

【问题讨论】：

无法得到你想要达到的目标。
没有办法让背景图片成为链接。您也许可以将图像放在那里并使用 CSS 定位和 z-index 将其移动到背景，但这并不是它真正的工作方式。

标签： html css wordpress

【解决方案1】：

您不能只添加指向背景图片的链接。您只能添加指向元素的链接，但不能添加背景。您可以将图像与背景分开，并将文本放在其上，位置为：absolute。

.box-home {
  position: relative;
  max-width: 500px;
  display: flex;
  align-items: center;
}

img {
  max-width: 100%;
  width: 100%;
}

.description {
  background-color: #000;
  color: #fff;
  position: absolute;
  text-align: center;
  width: 100%;
}

<div class="box-home">
  <a href="https://www.google.co.uk/" target="_blank"><img src="http://res.cloudinary.com/dzw929a4t/image/upload/v1495721050/sample.jpg" alt="" /></a>
  <div class="description" id="descr-one">
    <h2>title</h2>
    <p>description</p>
  </div>
</div>

在 CodePen 上：https://codepen.io/Klara/pen/oWVMJz

请注意确定这是否是您想要实现的目标。这样你只定位图像，但我不建议将标题和描述与链接目标分开，因为它可能会让用户感到困惑。从用户体验的角度来看，将图像和文本作为一个可点击的链接更有意义。

【讨论】：