배경 배너에 링크를 추가하려면 어떻게해야합니까?

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 "배너"및 배너의 높이가 고정되어서는 안되는 배경 배너에 있어야합니다.

"div"배너 안에 절대 div를 "banner-link"로 붙이면 고정 된 높이를 넣어야하는데 이것은 나를 위해 작동하지 않습니다.

CSS로 처리 할 수 ​​있습니까, 아니면 자바 스크립트를 사용해야합니까?

Answer 1

링크 높이를 100 %로 설정하고 페이지 콘텐츠 div의 Z- 색인을 높일 수 있습니다. 링크를 배경으로 남아있을 것입니다이 방법 :

.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를 사용할 수 있습니다.

작업 예 (사용은 스타일과 기본적으로 애니메이션을위한 자바 스크립트 기능 책임, 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>