时间戳

首页 > 解决方案 > 如何隐藏图像文本后面的按钮并使它们在所有设备上保持在同一个位置？

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

问题描述

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

我还设法将它们隐藏在图片中的两个手写字后面，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

标签： htmlcsswordpress

解决方案

您可以尝试为您的 div 使用display: none和display: block标记参数。这可能需要使用 JavaScript 来更改按钮的属性。单击第一个按钮时，其显示样式更改为无，单击第二个按钮时，第一个按钮的样式更改为阻止。onclick = "myFunction();"应该做的伎俩。https://www.w3schools.com/js/js_functions.asp供JS函数参考

推荐阅读