向 CSS 图片添加按钮？

Question

我正在尝试在网站登录页面的背景图片上添加一个按钮。我尝试在 CSS 中使用 position 标签，但没有成功。然后我尝试添加 z-index 但这也没有用。

我愿意接受任何更多建议。谢谢。

Answer 1

也许你可以使用这个：

function testFunc() {

alert('YESS');

}

.wrapper {
  width: 100%;
  height: 100vh;
  position: relative;
}

.background-image {
  position: absolute;
  width: 100%;
  height: 100%;
}

.yourbtn {
  position: relative;
  padding: 30px;
  background-color: red;
  color: yellow;
  top: 50%;
  left 50%;
}

<div class="wrapper">
<img class="background-image" src="https://cdn.vox-cdn.com/thumbor/ZlgvBM5ZISrK4O6gL1YkTOJST2M=/0x0:1221x787/920x613/filters:focal(514x297:708x491):format(webp)/cdn.vox-cdn.com/uploads/chorus_image/image/60732143/Screen_Shot_2018_08_05_at_10.37.13_AM.0.png">
<button class="yourbtn" onclick="testFunc()">Your Button Right Here</button>
</div>

Answer 2

我不知道你所说的在背景图片上放置一个按钮是什么意思，但这就是我要做的。

<body>
    <header>
        <h1 class="title">text here</h1>
        <a class="button" href="#">button</a>
    </header>
</body>

body{
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

header{
    background-image: url(image.png);
    background-size: cover;
    text-align: center;
    height: 30vh;
    margin-top: 0;
}

.title{
    font-size: 10vh;
    color: orange;
    margin: 0;
    margin-bottom: 5rem;
}

.button{
    background-color: #6495ED;
    padding: 1rem 3rem 1rem 3rem;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
}

向 CSS 图片添加按钮？

Add button to CSS image?

html

css

position

z-index