使用CSS

Question

我要使用此代码创建带有图像的按钮

.btnWo {
    position: relative;
    outline: none;
    border: none;
    height: 150px;
    width: 400px;
    border-radius: 10px;
    color: #FFF;
}

.btnWo img {
    height: 150px;
    width: 400px;
    border-radius: 10px;
    object-fit: cover;
}

.button-text {
    position: absolute;
    margin-right: 25px;
    bottom: 25%;
    width: 100%;
    right: 0%;
    text-align: right;
}

.button-text2 {
    bottom: 10%;
}

<div class="wo-img">
  <button id="btnWo" class="btnWo">
    <img src="https://i.postimg.cc/XNKnzLR0/woBg1.jpg">
    <span id="woName" class="button-text">Name</span>
    <span id="woTime" class="button-text button-text2">Time</span>
  </button>
</div>

但是图像有点偏右，我希望它完全覆盖按钮 我一直在尝试padding solution和transform solution，但是没有用

Answer 1

按钮（和其他元素）具有一些默认填充，这就是为什么您看到图像偏移的原因。

添加

padding: 0;

到

.btnWo {
    ...
}

---

某些开发人员使用一种技术，其中在样式表的开头将所有元素的默认值“置零”。这使您摆脱了此类问题。

* {
    padding: 0;
    margin: 0;
    border: 0;
}

Answer 2

我不知道您是否愿意通过设置按钮的背景来替换<img>标签。如果是这样，那么此代码将运行良好：

.btnWo {
    position: relative;
    outline: none;
    border: none;
    height: 150px;
    width: 400px;
    border-radius: 10px;
    background: url("https://i.postimg.cc/XNKnzLR0/woBg1.jpg");
    background-size: contain;
    color: #FFF;
}

.button-text {
    position: absolute;
    margin-right: 25px;
    bottom: 25%;
    width: 100%;
    right: 0%;
    text-align: right;
}

.button-text2 {
    bottom: 10%;
}

<div class="wo-img">
  <button id="btnWo" class="btnWo">
    <span id="woName" class="button-text">Name</span>
    <span id="woTime" class="button-text button-text2">Time</span>
  </button>
</div>