Question

我目前正在尝试学习一些HTML和CSS的乐趣，并为我的“输入页面”设置了一个我认为很酷的按钮，但是在添加了最后一个效果后，文本没有显示出来。删除“ border-left，right，top”后，文本显示出来，但是框失去了全部效果。我目前已将按钮设置为显示在屏幕中央，而我的背景图像则占用了整个页面。颜色应该与背景图片相似，我已经检查过它们是否不能相互融合

CSS代码

input.Button {
  text-align: center;
  position: absolute;
  top: 50%;
  width: 40%;
  height: 100px;
  margin-left: 30%;
  margin-right: 30%;
  background: #000000;
  color: #000000;
  opacity: 0.3;
  font-size: 400%;
  color: snow;
  font-family: "Impact", Charcoal, serif;
  letter-spacing: 0.3em;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid slategray;
}

编辑：HTML代码

<body>
  <div class="image">
    <img src="landingpage.jpg">
    <div class="button">
     <form>
       <input class="Button" type="button" value="Enter" onclick="window.location.href='about.html'" />
     </form>
   </div>
  </div>
</body>

input.Button {
  text-align: center;
  position: absolute;
  top: 50%;
  width: 40%;
  height: 100px;
  margin-left: 30%;
  margin-right: 30%;
  background: #000000;
  color: #000000;
  opacity: 0.3;
  font-size: 400%;
  color: snow;
  font-family: "Impact", Charcoal, serif;
  letter-spacing: 0.3em;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid slategray;
}

<body>
  <div class="image">
    <img src="landingpage.jpg">
    <div class="button">
      <form>
        <input class="Button" type="button" value="Enter" onclick="window.location.href='about.html'" />
      </form>
    </div>
  </div>
</body>

Answer 1

顶部的边框与按钮的高度相同，因此文本基本上会从其上移开。尝试将边框顶部设置为50px，您会看到它重新出现。

您可以在此处进行操作： http://www.cssdesk.com/zPURs

Answer 2

不确定这是实现此目的的最佳方法，但是您可以将按钮分为2个div。第一个div负责页面中的位置。第二个div仅包含position: relative，因此您可以使用absolute定位按钮，并且该按钮将根据包装器位置而不是主体进行计算。

然后将按钮顶部放置：-90px，它将悬停在您的样式div上方。

input.Button {
  text-align: center;
  font-size: 400%;
  color: snow;
  font-family: "Impact", Charcoal, serif;
  letter-spacing: 0.3em;
  position: absolute;
  top: -90px;
  background: transparent;
  border: 0px;
}

.wrapper{
  background: #000000;
  color: #000000;
  opacity: 0.3;
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  margin-left: 30%;
  margin-right: 30%;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid slategray;
  box-sizing: border-box;
}

.button-container{
  position: relative;
}

<body>
  <div class="image">
    <img src="landingpage.jpg">
    <div class="wrapper">
      <div class="button-container">
        <form>
          <input class="Button" type="button" value="Enter" onclick="window.location.href='about.html'" />
        </form>
      </div>
    </div>
  </div>
</body>

CSS样式化按钮后，文本未显示

2 个答案: