如何在背景橫幅上添加鏈接？

Question

如何在顯示在整個頁面背景中的背景橫幅上添加鏈接？

.wrapper { 
 
    width: 100%; 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 

 
.banner { 
 
    background-position: 50% 0; 
 
    background-repeat: no-repeat; 
 
} 
 

 
.banner { 
 
    background-image: url(https://s15.postimg.org/n11a3vr8b/image.jpg); 
 
    background-repeat: repeat-y; 
 
} 
 

 
.wrapper.banner { 
 
    background-image: url(https://s10.postimg.org/hyzxs6mmx/image.png); 
 
    background-repeat: no-repeat; 
 
} 
 

 
.banner-link { 
 
    position: absolute; 
 
    width: 100%; 
 
    display: block; 
 
    margin: 0 auto; 
 
    height: 200px; 
 
} 
 

 
.page-content { 
 
    background-color: white; 
 
    width: 300px; 
 
    display: inline-block; 
 
}

<div class="banner"> 
 
    <div class="wrapper banner"> 
 
    <a href="#" class="banner-link"></a> 
 
    <div class="page-content"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
     in reprehenderit in <a href="# ">Lorem link</a>voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
     <a href="#">Lorem link</a>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit 
 
     amet, <a href="#">Lorem link</a>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
 
     irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <a href="#">Lorem link</a>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
 
    </div> 
 
</div>

鏈接應該是對的背景橫幅是格「旗幟」和旗幟的高度不應該是固定的。

如果我把絕對的div「banner-link」放在div「banner」裏面，我必須把高度固定，這對我不起作用。

可以使用CSS來完成，還是應該使用Javascript？

Answer 1

您可以將鏈接的高度設置爲100％，並增加page-content div的z-index。這樣，鏈接將保持爲背景：

.wrapper { 
    width: 100%; 
    display: inline-block; 
    text-align: center; 
} 

.banner { 
    background-position: 50% 0; 
    background-repeat: no-repeat; 
} 

.banner { 
    background-image: url(https://s15.postimg.org/n11a3vr8b/image.jpg); 
    background-repeat: repeat-y; 
} 

.wrapper.banner { 
    background-image: url(https://s10.postimg.org/hyzxs6mmx/image.png); 
    background-repeat: no-repeat; 
} 

.banner-link { 
    position: absolute; 
    width: 100%; 
    display: block; 
    margin: 0 auto; 
    height: 100%; 
} 

.page-content { 
    background-color: white; 
    width: 300px; 
    display: inline-block; 
    z-index:1; 
    position:relative; 
} 

http://codepen.io/anon/pen/ZpGpaa

Answer 2

您可以使用jQuery綁定click事件和做（與您選擇的規則），你想要什麼。 （這種使用是一個Javascript功能的責任，CSS樣式，基本上動畫）

工作實例：

$(document).ready(function() { 
 
    $('.banner > .wrapper').click(function() { 
 
    console.log('you clicked me'); 
 
    window.location = '#new-url'; 
 
    }); 
 
});

.wrapper { 
 
    width: 100%; 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 

 
.banner { 
 
    background-position: 50% 0; 
 
    background-repeat: no-repeat; 
 
    cursor: pointer; 
 
} 
 

 
.banner { 
 
    background-image: url(https://s15.postimg.org/n11a3vr8b/image.jpg); 
 
    background-repeat: repeat-y; 
 
} 
 

 
.wrapper.banner { 
 
    background-image: url(https://s10.postimg.org/hyzxs6mmx/image.png); 
 
    background-repeat: no-repeat; 
 
} 
 

 
.banner-link { 
 
    position: absolute; 
 
    width: 100%; 
 
    display: block; 
 
    margin: 0 auto; 
 
    height: 200px; 
 
} 
 

 
.page-content { 
 
    background-color: white; 
 
    width: 300px; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="banner"> 
 
    <div class="wrapper banner" onclick="window.location = '#your-new-location'"> 
 
    <a href="#" class="banner-link"></a> 
 
    <div class="page-content"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
     in reprehenderit in <a href="# ">Lorem link</a>voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
     <a href="#">Lorem link</a>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit 
 
     amet, <a href="#">Lorem link</a>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
 
     irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <a href="#">Lorem link</a>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
 
    </div> 
 
</div>

Answer 3

$('.banner-link').css({height: $('.banner').height()});

.wrapper { 
 
    width: 100%; 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 

 
.banner { 
 
    background-position: 50% 0; 
 
    background-repeat: no-repeat; 
 
} 
 

 
.banner { 
 
    background-image: url(https://s15.postimg.org/n11a3vr8b/image.jpg); 
 
    background-repeat: repeat-y; 
 
} 
 

 
.wrapper.banner { 
 
    background-image: url(https://s10.postimg.org/hyzxs6mmx/image.png); 
 
    background-repeat: no-repeat; 
 
} 
 

 
.banner-link { 
 
    display:block; 
 
    position: absolute; 
 
    width: 100%; 
 
    display: block; 
 
    margin: 0 auto; 
 
} 
 

 
.page-content { 
 
    background-color: white; 
 
    width: 300px; 
 
    display: inline-block; 
 
}

<div class="banner"> 
 
    <div class="wrapper banner"> 
 
    <a href="#" class="banner-link"></a> 
 
    <div class="page-content"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
     in reprehenderit in <a href="# ">Lorem link</a>voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
     <a href="#">Lorem link</a>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit 
 
     amet, <a href="#">Lorem link</a>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
 
     irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <a href="#">Lorem link</a>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 4

             
  
 
   
 
    
.wrapper { 
 
    width: 100%; 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 

 
.banner { 
 
    background-position: 50% 0; 
 
    background-repeat: no-repeat; 
 
    background-image: url(https://s15.postimg.org/n11a3vr8b/image.jpg); 
 
    background-repeat: repeat-y; 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
} 
 

 
.wrapper.banner { 
 
    background-image: url(https://s10.postimg.org/hyzxs6mmx/image.png); 
 
    background-repeat: no-repeat; 
 
} 
 

 
.banner-link { 
 
    position: absolute; 
 
    width: 100%; 
 
    display: block; 
 
    margin: 0 auto; 
 
    height: 200px; 
 
    z-index: 0; 
 
} 
 

 
.banner-text { 
 
    position: relative; 
 
    left: 40%; 
 
    width: 1px; 
 
    z-index: 1; 
 
} 
 

 
.page-content { 
 
    background-color: white; 
 
    width: 300px; 
 
    display: inline-block; 
 
}
 
    
<div class="banner"> 
 
    <div class="wrapper banner"> 
 
    <a href="http://www.google.es" class="banner-link"></a> 
 
    </div> 
 
</div> 
 
<div class="banner-text"> 
 
    <div class="page-content"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 

 
     in reprehenderit in sssss <a href="http://www.w3schools.com">Lorem link</a>voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
     <a href="#">Lorem link</a>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sitamet, <a href="#">Lorem link</a>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <a href="#">Lorem link</a>Excepteur sint occaecat cupidatat non p`enter code here`roident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
 
    </div> 
 
</div>