Question

对于我的生活，我无法弄清楚如何添加＆＃34;立即购买＆＃34;按钮叠加在图像上，并保持响应...

我正在使用柠檬水框架，并希望保留它而不是引导程序。

关于如何修改代码的任何想法？以下是柠檬水框架的样本。

任何建议都会非常感激。

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  margin: 0 auto;
  max-width: 1140px;
}
[class*=bit-] {
  float: left;
  padding: .3em;
}
/* Grids */

.box {
  background: #00aabe;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  padding: 20px 0;
}
.box-2 {
  background: #00aabe;
}
.bit-1 {
  width: 100%;
}
.bit-2 {
  width: 50%;
}
.bit-3 {
  width: 33.33333%;
}
.bit-4 {
  width: 25%;
}
.bit-5 {
  width: 20%;
}
.bit-6 {
  width: 16.66667%;
}
.bit-7 {
  width: 14.28571%;
}
.bit-8 {
  width: 12.5%;
}
.bit-9 {
  width: 11.11111%;
}
.bit-10 {
  width: 10%;
}
.bit-11 {
  width: 9.09091%;
}
.bit-12 {
  width: 8.33333%;
}
.bit-25 {
  width: 25%;
}
.bit-40 {
  width: 40%;
}
.bit-60 {
  width: 60%;
}
.bit-75 {
  width: 75%;
}
.bit-35 {
  width: 35%;
}
.bit-65 {
  width: 65%;
}
/* Responsive Goodness */

/* Defaults above are set Desktop resolution or higher */

/* Laptop */

@media (min-width: 50em) and (max-width: 68.75em) {
  .bit-2,
  .bit-7,
  .bit-35,
  .bit-65 {
    width: 100%;
  }
  .bit-10,
  .bit-12,
  .bit-4,
  .bit-8 {
    width: 50%;
  }
}
/* Tablet */

@media (min-width: 30em) and (max-width: 50em) {
  .bit-10,
  .bit-12,
  .bit-4,
  .bit-6,
  .bit-8 {
    width: 50%;
  }
  .bit-1,
  .bit-11,
  .bit-2,
  .bit-3,
  .bit-5,
  .bit-7,
  .bit-9 {
    width: 100%;
  }
}
/* Mobile */

@media (max-width: 30em) {
  .bit-1,
  .bit-10,
  .bit-11,
  .bit-12,
  .bit-2,
  .bit-3,
  .bit-4,
  .bit-5,
  .bit-6,
  .bit-7,
  .bit-8,
  .bit-9 {
    width: 100%;
  }
}

＆＃13;

<div class="container">

  <div class="bit-3">
    <img src="http://i.imgur.com/K8B2N1H.jpg" width="100%">
  </div>

  <div class="bit-3">
    <img src="http://i.imgur.com/K8B2N1H.jpg" width="100%">
  </div>

  <div class="bit-3">
    <img src="http://i.imgur.com/K8B2N1H.jpg" width="100%">
  </div>

</div>

＆＃13;

Answer 1

这样的东西？

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  margin: 0 auto;
  max-width: 1140px;
}
[class*=bit-] {
  float: left;
  padding: .3em;
  position: relative;
}
button {
  display: none;
  cursor: pointer;
  border-radius: 5px;
  border: 2px solid brown;
  background-color: coral;
  height: 30px;
  width: 30%;
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}
[class*=bit-]:hover button {
  display: initial;
}
/* Grids */

.box {
  background: #00aabe;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  padding: 20px 0;
}
.box-2 {
  background: #00aabe;
}
.bit-1 {
  width: 100%;
}
.bit-2 {
  width: 50%;
}
.bit-3 {
  width: 33.33333%;
}
.bit-4 {
  width: 25%;
}
.bit-5 {
  width: 20%;
}
.bit-6 {
  width: 16.66667%;
}
.bit-7 {
  width: 14.28571%;
}
.bit-8 {
  width: 12.5%;
}
.bit-9 {
  width: 11.11111%;
}
.bit-10 {
  width: 10%;
}
.bit-11 {
  width: 9.09091%;
}
.bit-12 {
  width: 8.33333%;
}
.bit-25 {
  width: 25%;
}
.bit-40 {
  width: 40%;
}
.bit-60 {
  width: 60%;
}
.bit-75 {
  width: 75%;
}
.bit-35 {
  width: 35%;
}
.bit-65 {
  width: 65%;
}
/* Responsive Goodness */

/* Defaults above are set Desktop resolution or higher */

/* Laptop */

@media (min-width: 50em) and (max-width: 68.75em) {
  .bit-2,
  .bit-7,
  .bit-35,
  .bit-65 {
    width: 100%;
  }
  .bit-10,
  .bit-12,
  .bit-4,
  .bit-8 {
    width: 50%;
  }
}
/* Tablet */

@media (min-width: 30em) and (max-width: 50em) {
  .bit-10,
  .bit-12,
  .bit-4,
  .bit-6,
  .bit-8 {
    width: 50%;
  }
  .bit-1,
  .bit-11,
  .bit-2,
  .bit-3,
  .bit-5,
  .bit-7,
  .bit-9 {
    width: 100%;
  }
}
/* Mobile */

@media (max-width: 30em) {
  .bit-1,
  .bit-10,
  .bit-11,
  .bit-12,
  .bit-2,
  .bit-3,
  .bit-4,
  .bit-5,
  .bit-6,
  .bit-7,
  .bit-8,
  .bit-9 {
    width: 100%;
  }
}

<div class="container">

  <div class="bit-3">
    <img src="http://i.imgur.com/K8B2N1H.jpg" width="100%">
    <button>Shop Now</button>
  </div>

  <div class="bit-3">
    <img src="http://i.imgur.com/K8B2N1H.jpg" width="100%">
    <button>Shop Now</button>
  </div>

  <div class="bit-3">
    <img src="http://i.imgur.com/K8B2N1H.jpg" width="100%">
    <button>Shop Now</button>
  </div>

</div>

Answer 2

您可以将图像作为div的背景，然后这样就可以将按钮保留在该div中，但使用position：absolute并将其放置在您想要的位置。

所以只是一个简单的例子：

<div class="test">
    <button class="btn">Button</button>
</div>

然后css看起来像这样：

.test {
    background-image: "<your image>";
    height: 500px;
    width: 500px;
}
.btn {
    position:absolute;
    top: 200px;
    left: 200px;
}

悬停按钮覆盖，而不是悬停

2 个答案: