时间戳

首页 > 解决方案 > 如何在没有背景“故障”的情况下添加 HTML 按钮？

html - 如何在没有背景“故障”的情况下添加 HTML 按钮？

问题描述

我想在屏幕中央实现一个使用 2 个三角形作为背景的按钮。它的背景是自己的作品，但是当class="centerButton"添加时输出看起来很糟糕（参见示例）。我想知道为什么输出是这样的，我该如何解决它。我试图将图像实现为背景，但这也没有按计划工作。

示例：http: //jsfiddle.net/0Lgcotjv/

标签： htmlcss

解决方案

而不是拥有多个元素并尝试使用边距居中：

  • 将按钮嵌套在.box
  • 使用:before代替:after（因此背景不会与按钮重叠，或者您可以使用z-index）
  • 您已经在使用绝对定位作为背景，所以使用它来定位按钮

html,
body {
  margin: 0;
}

.box {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #ebca23;
}

.box:before {
  content: ' ';
  border-top: 100vh solid #d9d9d9;
  border-right: 100vw solid transparent;
  width: 0;
  position: absolute;
}

.box button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
<div class="box">
  <button>Center screen button</button>
</div>

推荐阅读