Я пытаюсь дать фон для текста в html, но я застрял.Цвет фона для текста
я попытался код ниже:
<p><span style="background-color: #000;color:#fff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt bibendum ligula, ac pulvinar justo scelerisque in. Ut nec auctor urna.</span></p>
результата:
это то, что я хочу делать (например, выбранный текст):
не знаю, как это сделать. любая помощь будет отличной.
спасибо!
Я думаю, это то, что вы пытаетесь сделать.
Вы должны сделать пункт inline(который будет держать только черный цвет под текстом, а не переполнение), затем нанесите небольшое количество padding и line-height к вашему пункту поэтому линия потрогать и приятно смотреть.
p {
display: inline;
background-color: rgba(0,0,0,.7);
color: #fff;
line-height: 1.4;
}<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt bibendum ligula, ac pulvinar justo scelerisque in. Ut nec auctor urna.</p>точно! благодаря! – haybeye
позвольте мне объяснить вам, что вам нужно сделать ... стиль, который вы дали пролете тег удалить его и передать его «P» тега, это решит вашу проблему.
Так что вы получите это так:
<!DOCTYPE html>
<html>
<head></head>
<body>
<p style="background-color:rgba(0, 0, 0, 0.45) ;color:#fff; display: inline; padding: .4em; line-height: 140%;"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt bibendum ligula, ac pulvinar justo scelerisque in. Ut nec auctor urna.</span></p>
</body>
</html>
p - элемент блока, поэтому это добавит черный прямоугольник. –
@HubertGrzeskowiak вправо, он добавит черный прямоугольник, но это наверняка приведет к заданному выходу. :) –
Теперь с дисплеем: inline вы добавили, что это сработает, да. –
Если вы хотите использовать background: rgba(0, 0, 0, 0.5) прозрачность, где последнее значение является величина прозрачности.
Это не поддерживается IE8, к сожалению, http://caniuse.com/#search=rgba. Вы можете использовать filter для IE 8 http://rland.me.uk/cross-browser-alpha-transparent-background-10-2011/
Также, чтобы получить полный блок цвета, наденьте свой стиль на тэг p, а не на пролет.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt bibendum ligula, ac pulvinar justo scelerisque in. Ut nec auctor urna.</p>
p {
background-color: rgba(0, 0, 0, 0.5);
color:#fff;
display: inline;
}
С прозрачным фоном вы можете получить проблемы с цветом наплавкой и темнее между линиями, вы можете играть с line-height:, чтобы исправить это.
Добавление цвета фона элемента блока приведет к созданию прямоугольного фона, BTW. Вам нужно либо использовать встроенный элемент, либо установить отображение: inline. –
Да, вы правы, я пропустил «display: inline»: «Я думал, что вложил это. – lukehillonline
попробовать этот jsfiddle: https://jsfiddle.net/xm4sLch8/1/ или применить ниже CSS для вашего диапазона:
span{
background: rgba(0,0,0,0.7);
color: #fff;
line-height: 32px;
padding: 7px;
}
Мы можем обеспечить line-height, background вместо background-color применить прозрачность фона с таким же эффектом
Поместите свой текст в DIV. .. – user3344236
Вы пытались использовать div вместо span? span - один элемент линии – Alexis
Do ** not ** использовать встроенный css, он абсолютно негибкий и .. ** ugh ** inline css. Используйте таблицы стилей или, по крайней мере, тег стиля. –