html - 带有文本覆盖和按钮的 CSS HTML 图像

Question

我是这方面的新手，我确信这是一个足够简单的修复程序，但我正在努力寻找一种方法来使用 CSS 按钮在图像上格式化文本 - 我真的需要这段代码来响应所以它也适用于移动设备。

如有任何建议，我们将不胜感激。

谢谢大家，

强尼P

这是 CSS:

   /* SET Custom SQUARE CALL TO ACTION Button */

#ctasquare-button-container {
  text-align: center !important;
}

#ctasquare-button {
  text-align: center !important;
  border: solid #000000 2px;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-box-shadow: 0 0px 0 0 #b13f21;
  -moz-box-shadow: 0 0px 0 0 #b13f21;
  box-shadow: 0 0px 0 0 #b13f21;
  position: absolute;
  margin: 0 0 0 -115px;
    top:30;
  -webkit-transition: .1s background-color linear;
  -moz-transition: .1s background-color linear;
  -o-transition: .1s background-color linear;
  transition: .1s background-color linear;
  padding: 21px 35px;
  color: #fff;
  border-color: #fff;
  font-family: Futura-Pt;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
  font-style: normal;
  cursor: pointer;
}

#ctasquare-button:hover {
  background-color: #fff;
  border-radius: 2px;
  -webkit-box-shadow: 0 0px 0 0 #b13f21;
  -moz-box-shadow: 0 0px 0 0 #b13f21;
  box-shadow: 0 0px 0 0 #b13f21;
  position: absolute;
  -webkit-transition: .1s background-color linear;
  -moz-transition: .1s background-color linear;
  -o-transition: .1s background-color linear;
  transition: .1s background-color linear;
  color: black;
}
/* END Custom SQAURE CALL TO ACTION Button */
/* overlay text on image properties */

.sidebyside {
  position: relative;
  width:100%;
  text-align:center;
  /* for IE 6 */
}

textoverlay {
  position: absolute;
  top: 0px;
  text-align: center;
  right: 50px;
  left:50px;
  width: 100%;
  padding: 0px 0px 0px 0px;
  margin: 30px 0px 0px 0px;
}

h2.TitleBlock {
  font-color: #fff;
  font-size: 62px;
  text-align: center;
  position: relative;
  font-weight: normal;
  margin: 30px 40px;

}
/* END overlay text on image properties */

这是 HTML:

<div>
<div class="sidebyside">

      <img src="http://static1.squarespace.com/static/548c3773e4b0c5db6dc87107/t/559d66a4e4b0f2834cbd26d0/1436378788290/Surface-Sq-Left-Orange.png" width="480"; height="480"alt="ICT in Education" />

      <textoverlay>
       <h2 class="TitleBlock"><span style="color:white">My Awesome Title</span></h2>
        <h2>
          <font color="white">This is Where The Subtitle Goes. The Quick Brown Fox Jumps Over The Lazy Dog</font>
        </h2>



<div class="ctasquare-button-container">
<a href="/xxx" id="ctasquare-button">Learn More
</a>
  &nbsp;
  <br><br>
</div>
</textoverlay>
</div>
</div>

Answer 1

一开始你可以试试这个:

   /* SET Custom SQUARE CALL TO ACTION Button */

#ctasquare-button-container {
  text-align: center !important;
}

#ctasquare-button {
  text-align: center !important;
  border: solid #000000 2px;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-box-shadow: 0 0px 0 0 #b13f21;
  -moz-box-shadow: 0 0px 0 0 #b13f21;
  box-shadow: 0 0px 0 0 #b13f21;
  position: absolute;
  margin: 0 0 0 -115px;
    top:30;
  -webkit-transition: .1s background-color linear;
  -moz-transition: .1s background-color linear;
  -o-transition: .1s background-color linear;
  transition: .1s background-color linear;
  padding: 21px 35px;
  color: #fff;
  border-color: #fff;
  font-family: Futura-Pt;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
  font-style: normal;
  cursor: pointer;
}

#ctasquare-button:hover {
  background-color: #fff;
  border-radius: 2px;
  -webkit-box-shadow: 0 0px 0 0 #b13f21;
  -moz-box-shadow: 0 0px 0 0 #b13f21;
  box-shadow: 0 0px 0 0 #b13f21;
  position: absolute;
  -webkit-transition: .1s background-color linear;
  -moz-transition: .1s background-color linear;
  -o-transition: .1s background-color linear;
  transition: .1s background-color linear;
  color: black;
}
/* END Custom SQAURE CALL TO ACTION Button */
/* overlay text on image properties */

.sidebyside {
  position: relative;
  width:100%;
  text-align:center;
  /* for IE 6 */
}

.sidebyside img{
  width: 100%;
  max-height: 100%;
  height: auto;
}

textoverlay {
  position: absolute;
  text-align: center;
  right: 0;
  left:0;
  bottom:0;
  top:0;
  padding: 0px 0px 0px 0px;
  margin: auto;
}

h2.TitleBlock {
  font-color: #fff;
  font-size: 62px;
  text-align: center;
  position: relative;
  font-weight: normal;
  margin: 30px 40px;

}
/* END overlay text on image properties */

<div>
<div class="sidebyside">

      <img src="http://static1.squarespace.com/static/548c3773e4b0c5db6dc87107/t/559d66a4e4b0f2834cbd26d0/1436378788290/Surface-Sq-Left-Orange.png" width="480"; height="480"alt="ICT in Education" />

      <textoverlay>
       <h2 class="TitleBlock"><span style="color:white">My Awesome Title</span></h2>
        <h2>
          <font color="white">This is Where The Subtitle Goes. The Quick Brown Fox Jumps Over The Lazy Dog</font>
        </h2>



<div class="ctasquare-button-container">
<a href="/xxx" id="ctasquare-button">Learn More
</a>
  &nbsp;
  <br><br>
</div>
</textoverlay>
</div>
</div>

要在其他设备上正确显示网站，您需要实现媒体查询，例如:

@media screen and (max-width: 300px) {
  .sidebyside img{
    width: auto;
    height: 100%;
  }
}