Автор Тема: Как сделать фон текста полупрозрачным ?  (Прочитано 161 раз)

30 Июня 2016, 02:08:12
  • Новичок
  • *
  • Сообщений: 22
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Подскажите как сделать фон текста полупрозрачным?
Этот код я прописываю в блоке,получается текст на рисунке. Но текст с чисто белым фоном на рисунке как-то не очень смотрится. Думаю фон для текста нужен полупрозрачный белый ? А как сделать?
<span style="font-family:Arial;font-size:30px;font-style:normal;font-weight:bold;text-decoration:none;text-transform:capitalize;line-height:34px;color:#000000;background-color:#FFFFFF;">ОДЕЖДА ДЛЯ ВЫШИВАНИЯ</span>
30 Июня 2016, 10:02:18
Ответ #1
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 85953
  • Репутация: +25399/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Прозрачность можно задать в формате записи цвета rgba.
4-й параметр задает прозрачность фона от 0 (прозрачный) до 1 (непрозрачный).
background-color: rgba(255, 255, 255, 0.5);
30 Июня 2016, 14:39:20
Ответ #2
  • Новичок
  • *
  • Сообщений: 22
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Прозрачность можно задать в формате записи цвета rgba.
4-й параметр задает прозрачность фона от 0 (прозрачный) до 1 (непрозрачный).
background-color: rgba(255, 255, 255, 0.5);
Мне этот код-background-color: rgba(255, 255, 255, 0.5); нужно вставить в этот заменив этот кусок- background-color:#FFFFFF; или рядышком встроить или? <span style="font-family:Arial;font-size:30px;font-style:normal;font-weight:bold;text-decoration:none;text-transform:capitalize;line-height:34px;color:#000000;background-color:#FFFFFF;">ОДЕЖДА ДЛЯ ВЫШИВАНИЯ</span>
Что-то делаю не так пока нет результата:(
30 Июня 2016, 15:18:54
Ответ #3
  • Ветеран
  • *****
  • Сообщений: 2174
  • Репутация: +49/-4
  • Сообщество PrestaShop
    • Просмотр профиля
Класс создаешь в файле стилей global.css. Для этого класса пишешь правила.   
.myclass{
    display:block;
    font-size:30px;
    font-weight:bold;
    text-transform:capitalize;
    line-height:34px;
    color:#000000;
    background-color: rgba(255, 255, 255, 0.5);
}
В шаблоне добавляешь класс
<span class="myclass">ОДЕЖДА ДЛЯ ВЫШИВАНИЯ</span>
30 Июня 2016, 18:05:26
Ответ #4
  • Новичок
  • *
  • Сообщений: 22
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Класс создаешь в файле стилей global.css. Для этого класса пишешь правила.
   
Спасибо Вам огромное,попробую сделать.
30 Июня 2016, 23:52:10
Ответ #5
  • Новичок
  • *
  • Сообщений: 22
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Код вставил в global.css в самый низ списка. А потом я понял нужно этот---<span class="myclass">ОДЕЖДА ДЛЯ ВЫШИВАНИЯ</span>--- вставить в шаблон ? В шаблон Вы имеете в виду в сам блок?  К примеру так ? -
<div class="goods-category">
   <h1>Нитки</h1>
   <p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
   <div>Купить</div>
</div>
<span class="myclass">НИТКИ</span>
Так не работает-появляется еще одна надпись маленьким шрифтом.
Или это применимо только к коду что я давал выше? Запутался я что-то  :( 
01 Июля 2016, 08:33:24
Ответ #6
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 32991
  • Репутация: +26759/-0
    • Просмотр профиля
F12 нажимаете в браузере, выделяте этот блок и смотрите загрузились стили или нет. 
01 Июля 2016, 22:05:48
Ответ #7
  • Новичок
  • *
  • Сообщений: 22
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Ура заработало! Всем большое спасибо! :D  Все как и было задумано кроме одного момента. На скрине видно фон текста сильно длинный и выходит далеко за пределы текста,существуют ли варианты ограничить длину фона-длиной текста?
01 Июля 2016, 22:20:25
Ответ #8
  • Ветеран
  • *****
  • Сообщений: 2174
  • Репутация: +49/-4
  • Сообщество PrestaShop
    • Просмотр профиля
Удали
display:block;или ширину widht добавь.
01 Июля 2016, 22:50:29
Ответ #9
  • Новичок
  • *
  • Сообщений: 22
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Понял сейчас попробую,а как сделать чтобы заодно полупрозрачный фон был и на этой строчке,но без увеличения текста?
<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
02 Июля 2016, 06:02:23
Ответ #10
  • Новичок
  • *
  • Сообщений: 22
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Вроде работает,но как-то не так...получается-если прописываю ширину к примеру- width: 220px;
 то эта ширина фона-текста для всех блоков того меню,если в одном блоке слово длинное то длина фона нормальная,а в другом блоке слово короткое но длина фона такая же как для длинного слова. А если удалит display:block;  тоже получается не очень красиво-на коротких словах нормально,а вот если несколько слов в два ряда,получается фон с правой стороны не цельный. Может нужно правило писать в файле стилей global.css-для каждого блока свое? И как эти правила правильно записать чтобы для каждого блока было свое? 
02 Июля 2016, 13:49:08
Ответ #11
  • Ветеран
  • *****
  • Сообщений: 2174
  • Репутация: +49/-4
  • Сообщество PrestaShop
    • Просмотр профиля
Если у тебя разной длинны текст, то нужно оставить display: block и добавить padding.
02 Июля 2016, 21:12:09
Ответ #12
  • Новичок
  • *
  • Сообщений: 22
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Сейчас у меня так прописано,правильно? Отступы фона всех сторон уменьшаются,кроме правой стороны.Может что-то не так прописал?
 .myclass{
    display:block;
    padding:1px;
    font-size:30px;
    font-weight:bold;
    text-transform:capitalize;
    line-height:34px;
    color:#000000;
    background-color: rgba(255, 255, 255, 0.5);
}
В шаблоне так:
<span class="myclass">ФУРНИТУРА</span>
<div class="goods-category">
<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
<div>Купить</div>

</div>
03 Июля 2016, 23:59:00
Ответ #13
  • Новичок
  • *
  • Сообщений: 22
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Что же можно придумать с правой стороной фона,чтобы его ширина была идентична с шириной слева,сверху,снизу ?  :(
04 Июля 2016, 09:47:05
Ответ #14
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 85953
  • Репутация: +25399/-0
  • Сообщество PrestaShop
    • Просмотр профиля
У вас на скрине  padding-right больше 1px. Проверьте правила стлией, у вас стили переопредеяются несколькими правилами.