Я хотел бы скрыть две кнопки, которых я достиг, используя прозрачный.
Мне также удалось скрыть их за двумя написанными от руки словами на картинке, 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