Jump to content
  • 0

Разместить текст поверх блока <canvas>

Adamatis

Asked by Adamatis,

 Share

Question

Adamatis Explorer

Adamatis

Posted
Posted

Вот проект:

jsFiddle

Проблема:

Необходимо разместить подпись (тег h3) поверх блока canvas(отражение картинки, генерируется скриптом. В коде просто серый прямоугольник).

Вставить подпись прямо в блоке canvas нет возможности.

Такой вариант работает, но не подходит потому, что подпись должна быть всегда на одинаковом расстоянии от картинки, поверх отражения. Картинки могут быть разного размера, поэтому отражение тоже разной высоты и привязка к нижней границе отражения не годится.


.door_name{
text-align: center;
width: 200px;
margin-top: -50px;
}

Подскажите решение плиз, бьюсь уже пол дня. Я бы изменил конечно код, который генерируется JS, но у меня нет в наличии необфусцированного js файла

Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • qqruz
      Публикация последних видео с нескольких каналов на сайт
      By qqruz
      Мне нужен код для автоматической публикация последних видео с нескольких каналов ютюб, что бы они шли последовательно. Я перерыл весь интернет и нечего не нашел, сам тоже пытался написать, но из-за слабого знания языка и малого количества видео не могу. Надеюсь на чью-то поддержку.
    • fooxy96
      Помогите разобрать часть адаптивного сайта.
      By fooxy96
      Здравствуйте! Нужна помощь хорошо разбирающихся людей в верстке. Написал часть сайта (html, css) адаптив. На сайте только шапка, поисковая форма, вход и корзина.
      Подскажите, что я сделал не правильно в коде.
      Какими способами можно реализвать форму поиска с кнопкой, вход, и корзину. Я понимаю что много ошибок, хоть код и не большой.
      Буду благодарен за любой отзыв и разбор.
      Спасибо!!!
      ссылка на сайт — u1071267.isp.regruhosting.ru
    • FotGOD
      С помощью Flex строки меню вместе. Что не так?
      By FotGOD
      Здравствуйте. Верстаю макет, но чтото не так. Подобные верстал раньше, все было хорошо, даже сверяю, все чуть ли не под копирку написал. Но в Этом коде почему-то строки в меню слиплись и не могу их раскинуть. на рисунке как должно быть, и как выходит. Что не так делаю?
       Html:
      <div class="container"> <header class="header"> <div class="header-item"> <a href="#"><h1 class="logo">Bouncy</h1></a> <nav class="navbar"> <ul class="menu"> <li><a href="#">Hello</a> </li> <li><a href="#">About</a> </li> <li><a href="#">Services</a> </li> <li><a href="#">Portfolio</a> </li> <li><a href="#">Team</a> </li> <li><a href="#">Blog</a> </li> <li><a href="#">Contact</a> </li> </ul> </nav> </div> </header> </div>  Css:
      .header { width: 1366px; height: 737px; background: url(../i/header.jpg) no-repeat; } .header a { text-decoration: none; } .container { width: 1366px; margin: auto; } .header-item { display: flex; flex-wrap: wrap; justify-content: space-around; } .logo { text-transform: uppercase; color: #ffffff; } .navbar { margin-top: 16px; } .menu { display: flex; justify-content: flex-end; list-style: none; } .menu a { color: #ffffff; }  


    • plarfox
      Кастомный радиобаттон Как правильно задать :hover и :focus?
      By plarfox
      Здравствуйте, помогите разобраться, делаем кастомные радиобаттоны, скрываем те что по умолчанию, с помощью span рисуем новые (псевдокласс :before для состояния отмеченности), стилизуем поведение в разных состояниях, :hover  :focus  :checked
         Проблема в том что после задания стилей  для :focus (которые передают обводку со скрытых радиобаттонов) эта обводка отображается не только после использования tab и нажатий с клавиатуры, но и при нажатии мышкой. В общем цель в том что-бы обводка от фокуса появлялась только при манипуляции с клавиатуры, а при нажатии с мыши и разных состояний (:hover :checked) ее не было , для них свои стили
      P. S. Изучаю пока-что HTML и CSS, надеюсь это можно сделать без Javascript
      <ul> <li class="filter-option"> <label><input class="visually-hidden filter-input-radio" type="radio" value="one" name="radio"> <span class="radio-indicator"></span> Радиокнопка 1 </label> </li> <li class="filter-option"> <label><input class="visually-hidden filter-input-radio" type="radio" value="two" name="radio"> <span class="radio-indicator"></span> Радиокнопка 2 </label> </li> <li class="filter-option"> <label><input class="visually-hidden filter-input-radio" type="radio" value="three" name="radio"> <span class="radio-indicator"></span> Радиокнопка 3 </label> </li> </ul>  
      .visually-hidden input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0); } .filter-option { position: relative; margin-bottom: 25px; padding-left: 38px; } .filter-option label { cursor: pointer; } .radio-indicator { content: ""; position: absolute; top: -3px; left: 0; width: 21px; height: 21px; border: 4px solid #4d4d4d; border-radius: 50%; opacity: 0.5; } .filter-input-radio:checked + .radio-indicator::before { content: ""; position: absolute; top: 7px; left: 7px; width: 8px; height: 8px; background-color: #4d4d4d; border-radius: 50%; opacity: 0.5; } .filter-option:hover, .filter-option:hover .radio-indicator, .filter-option:hover .radio-indicator::before { color: #000000; opacity: 1; } .filter-input-radio:focus + .radio-indicator { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; opacity: 1; } .filter-input-radio:focus + .radio-indicator::before { opacity: 1; }  
    • turre
      Вопрос про выравнивание
      By turre
      Здравствуйте.
      Помогите с Html и css
      Сам я начинающий и пока только учусь.
      Есть index.html к нему style.css получается криво, а надо одинаковые строчки.
      Спасибо.
      P.S. буду признателен если подскажите как сделать что бы текст был строго по центу.
      index.html
      style.css

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept