Скрыть объявление
ВАШИ ПРАВА ОГРАНИЧЕНЫ!

Зарегистрируйтесь на форуме, чтобы стать полноценным участником сообщества!

Наложение текста на картинку

Тема в разделе "Аудиты сайтов - оценка функционала, юзабилити", создана пользователем Talan91, 2 апр 2016.

02.04.16 в 12:05
01.06.16 в 02:37
12
1.011
0
  1. TopicStarter Overlay
    Talan91

    Talan91 Бывалый

    Регистрация:
    24 дек 2015
    Сообщения:
    204
    Лучших ответов:
    0
    Рейтинги:
    +15 / 0 / -0
    Подскажите как лучше сделать текст вот примеры:
    [​IMG] [​IMG] [​IMG]
     
  2. Karabas Barabas

    Команда форума VIP Кинотрафик v2

    Регистрация:
    20 ноя 2015
    Сообщения:
    8.150
    Лучших ответов:
    1
    Рейтинги:
    +3.748 / 12 / -0
    По мне так средний вариант, саму рамку можно поменьше сделать, поместить её в постер.
     
  3. TopicStarter Overlay
    Talan91

    Talan91 Бывалый

    Регистрация:
    24 дек 2015
    Сообщения:
    204
    Лучших ответов:
    0
    Рейтинги:
    +15 / 0 / -0
    [​IMG] Вот так?
     
  4. Den

    Den
    Команда форума VIP Кинотрафик v2

    Регистрация:
    19 окт 2015
    Сообщения:
    2.097
    Лучших ответов:
    0
    Рейтинги:
    +1.002 / 7 / -0
    Сложно говорить по наброску. Потому что разное оформление смотрелось бы по-разному. Например, если бы это была лента, то вполне подошли бы и боковые варианты, с выступом за границы постера, а если просто прямоугольник, то я бы сделал к примеру полупрозрачный фон снизу, и там вывел бы качество.
     
  5. TopicStarter Overlay
    Talan91

    Talan91 Бывалый

    Регистрация:
    24 дек 2015
    Сообщения:
    204
    Лучших ответов:
    0
    Рейтинги:
    +15 / 0 / -0
    Хочу сделать чтобы в списке отображалось качество http://kino-mironline.ru/load/online/boevik/5
     
  6. Karabas Barabas

    Команда форума VIP Кинотрафик v2

    Регистрация:
    20 ноя 2015
    Сообщения:
    8.150
    Лучших ответов:
    1
    Рейтинги:
    +3.748 / 12 / -0
    На 5px отступ сделай по краям рамки и полупрозрачный фон сделай
     
  7. TopicStarter Overlay
    Talan91

    Talan91 Бывалый

    Регистрация:
    24 дек 2015
    Сообщения:
    204
    Лучших ответов:
    0
    Рейтинги:
    +15 / 0 / -0
    на 5 по бокам отступить
     
  8. Den

    Den
    Команда форума VIP Кинотрафик v2

    Регистрация:
    19 окт 2015
    Сообщения:
    2.097
    Лучших ответов:
    0
    Рейтинги:
    +1.002 / 7 / -0
    [​IMG]
     
    #8 Den, 2 апр 2016
    Последнее редактирование: 2 апр 2016
  9. TopicStarter Overlay
    Talan91

    Talan91 Бывалый

    Регистрация:
    24 дек 2015
    Сообщения:
    204
    Лучших ответов:
    0
    Рейтинги:
    +15 / 0 / -0
    Где текст не могу сделать полупрозрачным, пока думаю как это исправить
     
  10. Den

    Den
    Команда форума VIP Кинотрафик v2

    Регистрация:
    19 окт 2015
    Сообщения:
    2.097
    Лучших ответов:
    0
    Рейтинги:
    +1.002 / 7 / -0
    Это я делал стилями для блока с id новости, предварительно убрав все стили у его родителя. И полностью убрав вложенную в него таблицу.
    Вёрстка там конечно полный ахтунг :eek:
    [​IMG]
    HTML:
    background: #fff;
    opacity: 0.6;
    width: 138px;
    position: relative;
    left: 12px;
    bottom: 38px;
    color: #3D4371;
    font: bold 14px/24px Verdana;
    border-radius: 2px 2px 0 0;
    
     
  11. TopicStarter Overlay
    Talan91

    Talan91 Бывалый

    Регистрация:
    24 дек 2015
    Сообщения:
    204
    Лучших ответов:
    0
    Рейтинги:
    +15 / 0 / -0

    А все решил проблему мне нужно было просто вписать это opacity: 0.6; и сразу отобразилось
     
  12. TopicStarter Overlay
    Talan91

    Talan91 Бывалый

    Регистрация:
    24 дек 2015
    Сообщения:
    204
    Лучших ответов:
    0
    Рейтинги:
    +15 / 0 / -0
    Теперь нужно стиль шрифта подобрать и цвет
     
  13. Igor.S

    Igor.S Новичок

    Регистрация:
    24 апр 2016
    Сообщения:
    26
    Лучших ответов:
    0
    Рейтинги:
    +3 / 0 / -0
    использовать opacity не особо тру, т.к. тогда и сама надпись становится полупрозрачной. Если вы хотите изменить прозрачность только фона, то лучше использовать такую конструкцию -
    background-color: rgba(255,255,255,0.6);
     
Яндекс.Метрика