添加圖片鏈接樣式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

回答

相關問題