添加图片链接样式DIV

-4

<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 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>

环节都格！

来源

2017-05-25 Antonio Carbone

不能让你想要达到什么。 –

没有办法让背景图像成为链接。你可能能够在那里放置一个图像，并使用CSS定位和z-index将其移动到背景，但这并不是真正的工作原理。 – amrinea

您不能仅添加链接到背景图片。您只能添加指向元素的链接，但不能添加背景。您可以将背景与背景分开，并将文字置于其上：绝对位置。

.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

注知道这是你想要达到的目标。这样您只能定位图片，但我不建议从链接目标中分离标题和说明，因为它可能会让用户感到困惑。从用户体验角度来看，将图像和文本都视为一个可点击的链接更有意义。

来源

2017-05-25 14:24:11 klara

谢谢。有用！ –

添加图片链接样式DIV

回答

相关问题