Question

我目前正在学习网页开发，我正在练习我的HTML和CSS。我创建了一个页面，其中div通过css相互叠加。为了实现这一点，我了解到我可以将背景图像放在css中。这是我的英雄形象的原型。 enter image description here

我希望左边的3个瓶子可以点击。我想点击每个瓶子把我带到一个div。那可能吗？

提前致谢

＆＃13;

.section {
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.secOne {
  background-image: url("../img/finbluehero.jpg");
}

.sub_sectionOne {
  height: 50%;
  background-color: #000B29;
}

.secTwo {
  background-image: url("../img/finredhero.jpg");
}

.sub_sectionTwo {
  height: 50%;
  background-color: #D70026;
}

.secThree {
  background-image: url("../img/finyellowhero.jpg");
}

.sub_sectionThree {
  height: 50%;
  background-color: #edb83d;
}

.footer {
  height: 100px;
  background-color: #f8f5f2;
}

＆＃13;

<div class="section">
  <div class="section secOne"></div>
  <div class="sub_sectionOne"></div>
  <div class="section secTwo"></div>
  <div class="sub_sectionTwo"></div>
  <div class="section secThree"></div>
  <div class="sub_sectionThree"></div>
  <div class="footer"></div>
</div>

＆＃13;

Answer 1

你走了：

您可以通过将div包含带有anchor标记的图片包裹起来，轻松完成此操作。 href属性可以设置为您要重定向到的链接。

＆＃13;

.section {
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.secOne {
  background-image: url("../img/finbluehero.jpg");
}

.sub_sectionOne {
  height: 50%;
  background-color: #000B29;
}

.secTwo {
  background-image: url("../img/finredhero.jpg");
}

.sub_sectionTwo {
  height: 50%;
  background-color: #D70026;
}

.secThree {
  background-image: url("../img/finyellowhero.jpg");
}

.sub_sectionThree {
  height: 50%;
  background-color: #edb83d;
}

.footer {
  height: 100px;
  background-color: #f8f5f2;
}

＆＃13;

<div class="section">
  <a href="link_to_wherever">
    <div class="section secOne"></div>
  </a>
  <div class="sub_sectionOne"></div>
  <a href="link_to_wherever">
    <div class="section secTwo"></div>
  </a>
  <div class="sub_sectionTwo"></div>
  <a href="link_to_wherever">
    <div class="section secThree"></div>
  </a>
  <div class="sub_sectionThree"></div>
  <div class="footer"></div>
</div>

＆＃13;

如何使我的英雄形象在CSS中可点击？

1 个答案: