html - 如何在 Jquery 中将按钮转换为图像？

Question

我正在尝试将上面有文字的图像变成按钮。如果我使用 data-role="button"，图像的整个排列和上面的文本都会变得一团糟。关于如何做到这一点并保持原样的安排有什么想法吗？另外，如何让文字背景与图片完美契合？

img {
    width: 50 px;
    height: 50 px;
}
.container {
    position: relative;
    text - align: center;
    color: white;
}
.centered {
    font - size: 30 px;
    position: absolute;
    top: 50 % ;
    left: 50 % ;
    transform: translate(-50 % , -50 % );
    background: rgba(0, 0, 0, 0.5);
    line - height: 200 px;
    width: 50 px;
    height: 50 px;
}

<div id="feature-wrapper" class="ui-block-d" data-role="button">
    <div class="container">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Birnbaum_am_Lerchenberg_retouched.jpg/310px-Birnbaum_am_Lerchenberg_retouched.jpg" />
        <div class="centered">Tree</div>
    </div>
</div>
<!--/tree------------------->

Answer 1

您可以像这样将图像用作按钮 -

img {
  max-width: 100%;
  cursor: pointer;
}

.container {
  position: relative;
  text-align: center;
  color: white;
}

.centered {
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.5);
  line-height: 200px;
  width: 50px;
  height: 50px;
}

<div id="feature-wrapper" class=ui-block-d>
  <div class="container">
    <img onclick="alert('Your function');" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Birnbaum_am_Lerchenberg_retouched.jpg/310px-Birnbaum_am_Lerchenberg_retouched.jpg" alt="Tree"/>
    <div class="centered">Tree</div>
  </div>
</div>