Html 按钮覆盖在悬停状态，而不是悬停状态

就我个人而言，我不知道如何在图片上添加“Shop Now”按钮覆盖层，并保持其响应性

我正在使用柠檬水框架，并且希望保留它而不是引导

有没有关于如何修改代码的想法？ 下面是柠檬水框架的示例

如有任何建议，将不胜感激

*{
保证金：0；
填充：0；
框大小：边框框；
}
.集装箱{
保证金：0自动；
最大宽度：1140px；
}
[类别*=位-]{
浮动：左；
填充：.3em；
}
/*网格*/
.盒子{
背景：#00aabe；
字体系列：“开放式Sans”，无衬线；
字体大小：14px；
字号：700；
文本对齐：居中；
填充：20px0；
}
.方框-2{
背景：#00aabe；
}
.bit-1{
宽度：100%；
}
.bit-2{
宽度：50%；
}
.bit-3{
宽度：33.33333%；
}
.第4位{
宽度：25%；
}
.第5位{
宽度：20%；
}
.第6位{
宽度：16.66667%；
}
.bit-7{
宽度：14.28571%；
}
.第8位{
宽度：12.5%；
}
.bit-9{
宽度：11.11111%；
}
.第10位{
宽度：10%；
}
.bit-11{
宽度：9.091%；
}
.bit-12{
宽度：8.33333%；
}
.第25位{
宽度：25%；
}
.比特40{
宽度：40%；
}
.bit-60{
宽度：60%；
}
.bit-75{
宽度：75%；
}
.bit-35{
宽度：35%；
}
.bit-65{
宽度：65%；
}
/*反应善良*/
/*以上默认设置为桌面分辨率或更高*/
/*笔记本电脑*/
@介质（最小宽度：50em）和（最大宽度：68.75em）{
.bit-2，
.bit-7，
.bit-35，
.bit-65{
宽度：100%；
}
.第10位，
.bit-12，
.第4位，
.第8位{
宽度：50%；
}
}
/*平板电脑*/
@介质（最小宽度：30em）和（最大宽度：50em）{
.第10位，
.bit-12，
.第4位，
.第6位，
.第8位{
宽度：50%；
}
.第1位，
.bit-11，
.bit-2，
.bit-3，
.第5位，
.bit-7，
.bit-9{
宽度：100%；
}
}
/*流动的*/
@介质（最大宽度：30em）{
.第1位，
.第10位，
.bit-11，
.bit-12，
.bit-2，
.bit-3，
.第4位，
.第5位，
.第6位，
.bit-7，
.第8位，
.bit-9{
宽度：100%；
}
}

像这样的东西

*{
保证金：0；
填充：0；
框大小：边框框；
}
.集装箱{
保证金：0自动；
最大宽度：1140px；
}
[类别*=位-]{
浮动：左；
填充：.3em；
位置：相对位置；
}
钮扣{
显示：无；
光标：指针；
边界半径：5px；
边框：2倍纯色棕色；
背景颜色：珊瑚；
高度：30px；
宽度：30%；
左：50%；
最高：50%；
位置：绝对位置；
转换：翻译（-50%，-50%）；
}
[类*=位-]：悬停按钮{
显示：首字母；
}
/*网格*/
.盒子{
背景：#00aabe；
字体系列：“开放式Sans”，无衬线；
字体大小：14px；
字号：700；
文本对齐：居中；
填充：20px0；
}
.方框-2{
背景：#00aabe；
}
.bit-1{
宽度：100%；
}
.bit-2{
宽度：50%；
}
.bit-3{
宽度：33.33333%；
}
.第4位{
宽度：25%；
}
.第5位{
宽度：20%；
}
.第6位{
宽度：16.66667%；
}
.bit-7{
宽度：14.28571%；
}
.第8位{
宽度：12.5%；
}
.bit-9{
宽度：11.11111%；
}
.第10位{
宽度：10%；
}
.bit-11{
宽度：9.091%；
}
.bit-12{
宽度：8.33333%；
}
.第25位{
宽度：25%；
}
.比特40{
宽度：40%；
}
.bit-60{
宽度：60%；
}
.bit-75{
宽度：75%；
}
.bit-35{
宽度：35%；
}
.bit-65{
宽度：65%；
}
/*反应善良*/
/*以上默认设置为桌面分辨率或更高*/
/*笔记本电脑*/
@介质（最小宽度：50em）和（最大宽度：68.75em）{
.bit-2，
.bit-7，
.bit-35，
.bit-65{
宽度：100%；
}
.第10位，
.bit-12，
.第4位，
.第8位{
宽度：50%；
}
}
/*平板电脑*/
@介质（最小宽度：30em）和（最大宽度：50em）{
.第10位，
.bit-12，
.第4位，
.第6位，
.第8位{
宽度：50%；
}
.第1位，
.bit-11，
.bit-2，
.bit-3，
.第5位，
.bit-7，
.bit-9{
宽度：100%；
}
}
/*流动的*/
@介质（最大宽度：30em）{
.第1位，
.第10位，
.bit-11，
.bit-12，
.bit-2，
.bit-3，
.第4位，
.第5位，
.第6位，
.bit-7，
.第8位，
.bit-9{
宽度：100%；
}
}

现在购物
现在购物
现在购物

您可以将图像作为div的背景，这样您就可以将按钮保持在div的内部，但使用position:absolute并将其放置在您想要的内部位置

举个简单的例子：

<div class="test">
    <button class="btn">Button</button>
</div>

按钮

然后css将如下所示：

.test {
    background-image: "<your image>";
    height: 500px;
    width: 500px;
}
.btn {
    position:absolute;
    top: 200px;
    left: 200px;
}

.test{
背景图像：“”；
高度：500px；
宽度：500px；
}
.btn{
位置：绝对位置；
顶部：200px；
左：200px；
}

是的，但是你能做一个不是悬停的版本，就在那里吗？我希望它能浮在图像的中心，而不是粘在底部。@adambwhitten:检查更新的答案，Shop now将浮在中心！对不起，让我复制这个，所以我有非悬停版本。你能把悬停版本再扔回去吗？顺便说一句，你是救命恩人。检查这个。您可能需要对按钮稍作更改，使其移动到中心。这是否响应tho？