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>

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

1 个答案: