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

 
Посетитель
small user social cms
Медаль
Сообщений: 121
Привет.

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

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

Сам код кнопки, без стилей прикрепляю
Код PHP:
  1.  
  2. <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 />
  3. <img src="/upload/wysiwyg/82bef9d818626bc0538789ebe10f9e28.jpeg" style="width: 100%;height: auto;"></a
У меня получается фотография кнопкой, к которой присвоен класс. Но в итоге надпись не могу центрировать, + задать цвет над этой фоткой.

Ну пи стили заодно.
Код PHP:
  1. .menusgl{
  2. position: relative;
  3. display: inline-block;
  4. color: #777674;
  5. font-weight: bold;
  6. text-decoration: none;
  7. text-shadow: rgba(255,255,255,.5) 1px 1px, rgba(100,100,100,.3) 3px 7px 3px;
  8. user-select: none;
  9. padding: 1em 2em;
  10. outline: none;
  11. border-radius: 3px / 100%;
  12. background-image:
  13. linear-gradient(45deg, rgba(255,255,255,.0) 30%, rgba(255,255,255,.8), rgba(255,255,255,.0) 70%),
  14. 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)),
  15. linear-gradient(to right, rgba(125,125,125,1), rgba(255,255,255,.9) 45%, rgba(125,125,125,.5)),
  16. linear-gradient(to right, rgba(125,125,125,1), rgba(255,255,255,.9) 45%, rgba(125,125,125,.5)),
  17. linear-gradient(to right, rgba(223,190,170,1), rgba(255,255,255,.9) 45%, rgba(223,190,170,.5)),
  18. linear-gradient(to right, rgba(223,190,170,1), rgba(255,255,255,.9) 45%, rgba(223,190,170,.5));
  19. background-repeat: no-repeat;
  20. background-size: 200% 100%, auto, 100% 2px, 100% 2px, 100% 1px, 100% 1px;
  21. background-position: 200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px);
  22. box-shadow: rgba(0,0,0,.5) 3px 10px 10px -10px;
  23. }
  24. .menusgl:hover {
  25. transition: .5s linear;
  26. background-position: -200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px);
  27. }
  28. .menusgl:active {
  29. top: 1px;
  30. }
Прикрепленные файлы:
bandicam20171129142024591_cdjga.jpg | 82,47 Кб | Скачали: 21
Посетитель
no avatar
Сообщений: 63
Я не специалист. Но делал сам кнопки. Когда вывел все стили в класс один стало проще разобраться.

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

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

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

Зы... Ну и надеюсь у вас класс правильно называется, ато в кнопке "button99" он, а в стилях "menusgl" в приведённых примерах
Редактировалось: 4 раз (Последний: 29 ноября 2017 в 14:44)
Посетитель
small user social cms
Медаль
Сообщений: 121
@demelkar:

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

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


текст


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

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

Да с этим пробовали - не то. Нужна кнопка в которой вставлено фото, и поверх фото мы используем прозрачный баскграунд .
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1179
@Dina, перечитал Ваше первое сообщение раз 5 и не понял, что Вам нужно. И что на скриншоте.

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

Попробуйте, может поможет так:
Код HTML:
  1. <a class="button99" href="/informacija/stati/sostav-oborudovanija-sovremennyh-konfere.html"><span>888</span></a>
Код CSS:
  1. .button99{
  2. width:XXXpx;
  3. height:YYYpx;
  4. line-height:YYYpx;
  5. text-align:center;
  6. display:block;
  7. background:url('путь к файлу') no-repeat center center;
  8. background-size:cover;
  9. }
  10.  
  11. .button99 span{
  12. font-size:22px;
  13. }
Если же Вам еще нужно наложение на картинку полупрозрачного слоя, тогда можно css дополнить так:
Код CSS:
  1. .button99{
  2. position:relative;
  3. }
  4.  
  5. .button99 span{
  6. position:abslolute;
  7. top:0;
  8. left:0;
  9. width:XXXpx;
  10. height:YYYpx;
  11. line-height:YYYpx;
  12. display:block;
  13. background:rgba(0, 0, 0, 0.2);
  14. }
Искусственный интеллект на твоем сайте! Больше не надо ни за что платить и ничего делать. НИКОГДА! Будь свободным!
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.