如何在背景横幅上添加链接？

时间：2016-09-07 13:17:26

标签： javascript jquery html css

如何在整页背景中显示的背景横幅上添加链接？

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

链接应位于div“banner”的背景横幅上，横幅的高度不应固定。

如果我在div“banner”中放置绝对div“banner-link”，我必须设置固定高度，这对我不起作用。

可以用CSS完成，还是应该使用Javascript？

4 个答案:

答案 0 :(得分：0)

您可以将链接的高度设置为100％并增加页面内容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

答案 1 :(得分：0)

您可以使用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>

答案 2 :(得分：0)

$('.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>

答案 3 :(得分：0)





.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>
相关问题
最新问题