バックグラウンドバナーにリンクを追加するにはどうすればよいですか？

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を "banner-link" div "banner"に入れたのであれば、固定された高さを置く必要があり、これは私のためには機能しません。

CSSを使用することはできますか？またはJavascriptを使用する必要がありますか？

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を使用することができます。 （この使用は、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>