帶有文本疊加層和按鈕的CSS HTML圖像

Question

我是這個東西的新手，而且我敢肯定這是一個簡單的修復程序，但是我正在努力尋找一種使用CSS按鈕在IMAGE上格式化TEXT的方法-我確實需要此代碼具有響應能力，這樣它才能起作用在移動設備上也是如此。

任何建議將不勝感激。

謝謝大家，

Johnny_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%;
  }
}