PrestaShop Forum

Подскажите как сделать фон текста полупрозрачным?
Этот код я прописываю в блоке,получается текст на рисунке. Но текст с чисто белым фоном на рисунке как-то не очень смотрится. Думаю фон для текста нужен полупрозрачный белый ? А как сделать?
<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>

Прозрачность можно задать в формате записи цвета rgba.
4-й параметр задает прозрачность фона от 0 (прозрачный) до 1 (непрозрачный).
background-color: rgba(255, 255, 255, 0.5);

Цитата: DarinSr от 30 июня 2016, 10:02:18
Прозрачность можно задать в формате записи цвета 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>
Что-то делаю не так пока нет результата:(

Класс создаешь в файле стилей 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, 15:18:54
Класс создаешь в файле стилей global.css. Для этого класса пишешь правила.

Спасибо Вам огромное,попробую сделать.

Код вставил в 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>
Так не работает-появляется еще одна надпись маленьким шрифтом.
Или это применимо только к коду что я давал выше? Запутался я что-то   

F12 нажимаете в браузере, выделяте этот блок и смотрите загрузились стили или нет. 

Ура заработало! Всем большое спасибо!   Все как и было задумано кроме одного момента. На скрине видно фон текста сильно длинный и выходит далеко за пределы текста,существуют ли варианты ограничить длину фона-длиной текста?

Удали
display:block;
или ширину widht добавь.

Понял сейчас попробую,а как сделать чтобы заодно полупрозрачный фон был и на этой строчке,но без увеличения текста?
<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

Вроде работает,но как-то не так...получается-если прописываю ширину к примеру- width: 220px;
то эта ширина фона-текста для всех блоков того меню,если в одном блоке слово длинное то длина фона нормальная,а в другом блоке слово короткое но длина фона такая же как для длинного слова. А если удалит display:block;  тоже получается не очень красиво-на коротких словах нормально,а вот если несколько слов в два ряда,получается фон с правой стороны не цельный. Может нужно правило писать в файле стилей global.css-для каждого блока свое? И как эти правила правильно записать чтобы для каждого блока было свое? 

Если у тебя разной длинны текст, то нужно оставить display: block и добавить padding.

Сейчас у меня так прописано,правильно? Отступы фона всех сторон уменьшаются,кроме правой стороны.Может что-то не так прописал?
.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>

Что же можно придумать с правой стороной фона,чтобы его ширина была идентична с шириной слева,сверху,снизу ? 

У вас на скрине  padding-right больше 1px. Проверьте правила стлией, у вас стили переопредеяются несколькими правилами.