Кнопка в которой есть подложка (фото) - не могу понять как сделать

#1 29 ноября 2017 в 14:25

Привет.

Нужна кнопка, цвет прозрачный синий, по центру есть надпись. В кнопке присутствует фото, и как бы получается кнопка прозрачная и высвечивается фото, при клике попадаем в нужный раздел..- Вопрос школьника конечно но реально не вникаю как сделать.

Прикрепляю фото

Сам код кнопки, без стилей прикрепляю

 
<a class="button99"style="background: url(/upload/wysiwyg/82bef9d818626bc0538789ebe10f9e28.jpeg)" href="/informacija/stati/sostav-oborudovanija-sovremennyh-konfere.html"  style="text-align: center;"><span style="font-size:20px;"> 888</span><br />
<img src="/upload/wysiwyg/82bef9d818626bc0538789ebe10f9e28.jpeg"  style="width: 100%;height: auto;"></a

У меня получается фотография кнопкой, к которой присвоен класс. Но в итоге надпись не могу центрировать, + задать цвет над этой фоткой.

Ну пи стили заодно.

.menusgl{
  position: relative;
  display: inline-block;
  color: #777674;
  font-weight: bold;
  text-decoration: none;
  text-shadow: rgba(255,255,255,.5) 1px 1px, rgba(100,100,100,.3) 3px 7px 3px;
  user-select: none;
  padding: 1em 2em;
  outline: none;
  border-radius: 3px / 100%;
  background-image:
   linear-gradient(45deg, rgba(255,255,255,.0) 30%, rgba(255,255,255,.8), rgba(255,255,255,.0) 70%),
   linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 90%, rgba(255,255,255,.3)),
   linear-gradient(to right, rgba(125,125,125,1), rgba(255,255,255,.9) 45%, rgba(125,125,125,.5)),
   linear-gradient(to right, rgba(125,125,125,1), rgba(255,255,255,.9) 45%, rgba(125,125,125,.5)),
   linear-gradient(to right, rgba(223,190,170,1), rgba(255,255,255,.9) 45%, rgba(223,190,170,.5)),
   linear-gradient(to right, rgba(223,190,170,1), rgba(255,255,255,.9) 45%, rgba(223,190,170,.5));
  background-repeat: no-repeat;
  background-size: 200% 100%, auto, 100% 2px, 100% 2px, 100% 1px, 100% 1px;
  background-position: 200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px);
  box-shadow: rgba(0,0,0,.5) 3px 10px 10px -10px;
}
.menusgl:hover {
  transition: .5s linear;
  background-position: -200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px);
}
.menusgl:active {
  top: 1px;
}

Прикрепленный файл

bandicam20171129142024591_cdjga.jpg 83 Кб

#2 29 ноября 2017 в 14:36

Я не специалист. Но делал сам кнопки. Когда вывел все стили в класс один стало проще разобраться.

у меня кнопки имеют такой вид:

<form action="url">
<button class="button"> текст </button>
</form>

Потом открыл в лисе через иследование элемента и посмотрел что и как мешает и какие настройки лучше. Padding может убрать надо.

Зы… Ну и надеюсь у вас класс правильно называется, ато в кнопке "button99" он, а в стилях "menusgl" в приведённых примерах

#3 29 ноября 2017 в 15:38

Я не специалист. Но делал сам кнопки. Когда вывел все стили в класс один стало проще разобраться.

у меня кнопки имеют такой вид:

текст

Потом открыл в лисе через иследование элемента и посмотрел что и как мешает и какие настройки лучше. Padding может убрать надо.

Зы… Ну и надеюсь у вас класс правильно называется, ато в кнопке "button99" он, а в стилях "menusgl" в приведённых примерах

@demelkar

Да с этим пробовали — не то. Нужна кнопка в которой вставлено фото, и поверх фото мы используем прозрачный баскграунд.

Сегодня в 09:17

#4 29 ноября 2017 в 19:01

@Dina, перечитал Ваше первое сообщение раз 5 и не понял, что Вам нужно. И что на скриншоте.

Попробую предположить, что Вам нужна кнопка (ссылка) с фоновой картинкой, по центру этой ссылки текст? Просто в коде Вашей кнопки у Вас у самой ссылки фон, да еще и картинка вставлена.

Попробуйте, может поможет так:

<a class="button99" href="/informacija/stati/sostav-oborudovanija-sovremennyh-konfere.html"><span>888</span></a>

.button99{
     width:XXXpx;
     height:YYYpx;
     line-height:YYYpx;
     text-align:center;
     display:block;
     background:url('путь к файлу') no-repeat center center;
     background-size:cover;    
}
 
.button99 span{
     font-size:22px;    
}

Если же Вам еще нужно наложение на картинку полупрозрачного слоя, тогда можно css дополнить так:

.button99{
     position:relative;    
}
 
.button99 span{
     position:abslolute;
     top:0;
     left:0;
     width:XXXpx;
     height:YYYpx;
     line-height:YYYpx;
     display:block; 
     background:rgba(0, 0, 0, 0.2);  
}

t.me/googleindexingapi

Правки шаблона

Обрезка title в виджетах

Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

Кнопка в которой есть подложка (фото) - не могу понять как сделать

Похожие темы

[ЕСТЬ РЕШЕНИЕ] Изменить цвет в подложке рубрик

Обратная связь - z-index не могу понять как сделать, чтобы всегда была сверху кнопка

Кнопки html

Кнопки поделится, соц сети для instant 2

Пропала вверху кнопка редактировать

Глупый вопрос(продолжение): Кнопки "Сохранить" в backend

InstantCMS Team

О проекте

Поддержка

Дополнения