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来更改按钮的属性。单击第一个按钮时，其显示样式更改为无，单击第二个按钮时，第一个样式更改为阻止。 onclick = "myFunction();"应该可以解决问题。 https://www.w3schools.com/js/js_functions.asp供JS函数参考

Answer 2

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

一种更有效的方法是使用an HTML image map。使用图像地图可以让您在图像上创建任意形状的区域，这些区域可以像链接一样被点击。

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

2 个答案: