如何将按钮隐藏在图像文本后面，并使它们在所有设备上保持在同一位置？

Question

我想隐藏两个按钮，这是我使用透明实现的。

我还设法将它们隐藏在图片中的两个手写单词post和search后面。问题是，当涉及到桌面、不同的屏幕大小、移动/平板电脑、不同的屏幕大小/浏览器、操作系统等时，按钮与文本不匹配，要么太高，要么太低，取决于设备等。

如果我将一个位置设置为移动设备，另一个设置为桌面，但一旦屏幕大小发生变化，文本和按钮就会不匹配，图片文本就无法点击。这就是我试图实现的效果，就像用户点击手写一样，而实际上它只是图像上的一个隐藏按钮。

我还试图将按钮从图像中剪切出来，并使用background: url，但它不起作用，只是将图像裁剪到错误的位置，隐藏了单词。

我能想到的唯一解决方案是，如果有某种方法告诉浏览器不要移动图像，而不管屏幕大小等等。

.btn.btn:hover {color: transparent! important; background: 
transparent! important; border: none! important;}

btn.btn:active {color: transparent! important; background: 
transparent! important; border: none! important; box- 
shadow:none;}

.btn.btn {color: transparent! important; background: 
 transparent! important; border: none! important;}

Html

<div id="content" class="main-container">
<section class="content-area  pt0 ">
<div id="main" class="" role="main">
<div id="shapely_home_parallax-3" class="widget 
shapely_home_parallax"><section class="cover fullscreen 
image-bg"><div class="parallax-window fullscreen" data- 
parallax="scroll" data-image-src="https://adsler.co.uk
/wp- 
content/uploads/2019/07/IMG_20190706_112754.jpg" 
data-ios-fix="true" data-over-scroll-fix="true" data-android- 
fix="true"><div class="align-transform"><div class="row">
<div class="top-parallax-section"><div class="col-md-8 
col-md-offset-2 col-sm-10 col-sm-offset-1 text-center">
<div class="mb32"></div><a class="btn btn-lg btn-white" 
href="https://adsler.co.uk/wp-user-test-dashboard-2. 
2/awpcp-place-ad/">Post</a><a class="btn btn-lg btn- 
filled" href="https://adsler.co.uk/search. 
adsler/">Search</a>                              
</div></div><!--end of row--></div>
</div></div></section><div class="clearfix"></div>
</div>
</div><!-- #main -->
</section><!-- section -->

为了让您更好地理解它的含义，这个页面是：https://adsler.co.uk

Answer 1

您可以尝试在div中使用display: none和display: block标记参数。这可能需要使用JavaScript来更改按钮的属性。当单击第一个按钮时，它的显示样式将更改为none，而当单击第二个按钮时，第一个按钮的样式将更改为block。onclick = "myFunction();"应该可以做到这一点。关于JS函数的参考https://www.w3schools.com/js/js_functions.asp

Answer 2

，这是我试图实现的效果，就像用户点击手写一样，而实际上它只是图像上的一个隐藏按钮。

实现此效果的一种更有效的方法是使用an HTML image map。使用图像映射将允许您在图像上创建任意形状的区域，这些区域可以像链接一样单击。