Question

我是这个东西的新手＆amp;我确信这是一个简单的修复，但我很难找到一种方法来使用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

首先你可以试试这个：

＆＃13;

<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>

＆＃13;

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

＆＃13;

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

    using System;

    public class methodTest
    {
        int a;
        int b;
        int c;
         public methodTest(int i, int j, int k)
        {
            a = i;
            b = j;
            c = k;
        }
    }

    public class methodObj
    {
        static void Main()
        {
        methodTest obj = new methodTest(10, 20, 30);
        Console.WriteLine("obj = " + obj.b);
        Console.ReadKey();
        }
    }

带有文本叠加的CSS HTML图像＆amp;按键

1 个答案: