Я хочу, щоб зелений фон знаходився прямо за текстом, а не на 100% від ширини сторінки. Ось мій поточний код:
h1 {
text-align: center;
background-color: green;
}
<h1>The Last Will and Testament of Eric Jones</h1>
Я хочу, щоб зелений фон знаходився прямо за текстом, а не на 100% від ширини сторінки. Ось мій поточний код:
h1 {
text-align: center;
background-color: green;
}
<h1>The Last Will and Testament of Eric Jones</h1>
Відповіді:
Покладіть текст у вбудований елемент , наприклад, a <span>
.
<h1><span>The Last Will and Testament of Eric Jones</span></h1>
А потім застосуйте колір фону на вбудованому елементі.
h1 {
text-align: center;
}
h1 span {
background-color: green;
}
Вбудований елемент настільки ж великий, як і його вміст, так що це потрібно робити вам.
h1 { display:inline; }
display: table;
h1 {
display: table; /* keep the background color wrapped tight */
margin: 0px auto 0px auto; /* keep the table centered */
padding:5px;font-size:20px;background-color:green;color:#ffffff;
}
<h1>The Last Will and Testament of Eric Jones</h1>
скрипка
http://jsfiddle.net/J7VBV/293/
більше
display: table
вказує елементу поводитись так, як звичайна таблиця HTML.
Детальніше про це в w3schools , CSS Tricks і тут
display: inline-flex;
text-align: center;
від батьків.container {
text-align: center; /* center the child */
}
h1 {
display: inline-flex; /* keep the background color wrapped tight */
padding:5px;font-size:20px;background-color:green;color:#ffffff;
}
<div class="container">
<h1>The Last Will and Testament of Eric Jones</h1>
</div>
display: flex;
.container {
display: flex;
justify-content: center; /* center the child */
}
h1 {
display: flex;
/* margin: 0 auto; or use auto left/right margin instead of justify-content center */
padding:5px;font-size:20px;background-color:green;color:#ffffff;
}
<div class="container">
<h1>The Last Will and Testament of Eric Jones</h1>
</div>
о
Напевно, найпопулярніший посібник по Flexbox і той, на який я постійно посилаюсь, є у CSS Tricks
display: block;
.container {
display: flex;
justify-content: center; /* centers child */
}
h1 {
display: block;
padding:5px;font-size:20px;background-color:green;color:#ffffff;
}
<div class="container">
<h1>The Last Will and Testament of Eric Jones</h1>
</div>
::before
h1 {
display: flex; /* set a flex box */
justify-content: center; /* so you can center the content like this */
}
h1::before {
content:'The Last Will and Testament of Eric Jones'; /* the content */
padding: 5px;font-size: 20px;background-color: green;color: #ffffff;
}
<h1></h1>
скрипка
http://jsfiddle.net/J7VBV/457/
о
Більше про псевдоелементи css :: до та :: після в CSS Трюки та псевдоелементи взагалі в w3schools
display: inline-block;
центрування з position: absolute
іtranslateX
вимагає position: relative
батьків
.container {
position: relative; /* required for absolute positioned child */
}
h1 {
display: inline-block; /* keeps container wrapped tight to content */
position: absolute; /* to absolutely position element */
top: 0;
left: 50%; /* part1 of centering with translateX/Y */
transform: translateX(-50%); /* part2 of centering with translateX/Y */
white-space: nowrap; /* text lines will collapse without this */
padding:5px;font-size:20px;background-color:green;color:#ffffff;
}
<h1>The Last Will and Testament of Eric Jones</h1>
о
Детальніше про центрування з transform: translate();
(і центрування загалом) у цій статті про хитрощі CSS
text-shadow:
і box-shadow:
h1, h2, h3, h4, h5 {display: table;margin: 10px auto;padding: 5px;font-size: 20px;color: #ffffff;overflow:hidden;}
h1 {
text-shadow: 0 0 5px green,0 0 5px green,
0 0 5px green,0 0 5px green,
0 0 5px green,0 0 5px green,
0 0 5px green,0 0 5px green;
}
h2 {
text-shadow: -5px -5px 5px green,-5px 5px 5px green,
5px -5px 5px green,5px 5px 5px green;
}
h3 {
color: hsla(0, 0%, 100%, 0.8);
text-shadow: 0 0 10px hsla(120, 100%, 25%, 0.5),
0 0 10px hsla(120, 100%, 25%, 0.5),
0 0 10px hsla(120, 100%, 25%, 0.5),
0 0 5px hsla(120, 100%, 25%, 1),
0 0 5px hsla(120, 100%, 25%, 1),
0 0 5px hsla(120, 100%, 25%, 1);
}
h4 { /* overflow:hidden is the key to this one */
text-shadow: 0px 0px 35px green,0px 0px 35px green,
0px 0px 35px green,0px 0px 35px green;
}
h5 { /* set the spread value to something larger than you'll need to use as I don't believe percentage values are accepted */
box-shadow: inset 0px 0px 0px 1000px green;
}
<h1>The First Will and Testament of Eric Jones</h1>
<h2>The 2nd Will and Testament of Eric Jones</h2>
<h3>The 3rd Will and Testament of Eric Jones</h3>
<h4>The Last Will and Testament of Eric Jones</h4>
<h5>The Last Box and Shadow of Eric Jones</h5>
скрипка
https://jsfiddle.net/Hastig/t8L9Ly8o/
Є кілька інших способів зробити це шляхом комбінування різних варіантів відображення та методів центрування вище.
display: table
може бути настільки потужним, але я ціную, що ви надали робочі альтернативи.
Трохи пізно до гри, але думав, що я додам свої 2 центи ...
Щоб уникнути додавання додаткової розмітки внутрішнього прольоту, ви можете змінити <h1>
властивість відображення з block
на inline
(уловлюйте, ви б забезпечили елементи після <h1>
блокових елементів.
HTML
<h1>
The Last Will and Testament of
Eric Jones</h1>
<p>Some other text</p>
CSS
h1{
display:inline;
background-color:green;
color:#fff;
}
Результат
JSFIDDLE
http://jsfiddle.net/J7VBV/
Дуже простий трюк для цього - додати <span>
тег і додати до нього колір фону. Це буде виглядати саме так, як ви цього хочете.
<h1>
<span>The Last Will and Testament of Eric Jones</span>
</h1>
І CSS
h1 { text-align: center; }
h1 span { background-color: green; }
<span>
позначте в тезі вбудованого елемента, тож він буде охоплювати лише вміст, який підробляє ефект.
Основна думка, яку інші нехтують, полягає в тому, що ОП заявило, що вони не можуть змінювати HTML.
Ви можете орієнтуватися на те, що вам потрібно в DOM, а потім додавати класи динамічно за допомогою JavaScript. Тоді стиль, як вам потрібно.
На прикладі, який я зробив, я націлив усі <p>
елементи на jQuery і обернув його дівом із класом "кольорові"
$( "p" ).wrap( "<div class='colored'></div>" );
Потім у моєму CSS я націлив <p>
та надав йому колір тла та змінив наdisplay: inline
.colored p {
display: inline;
background: green;
}
Встановивши дисплей на вбудований, ви втрачаєте частину стилю, який він зазвичай успадковує. Тому переконайтеся, що ви орієнтуєтесь на найбільш конкретний елемент та стилюєте контейнер так, щоб він відповідав іншій частині вашого дизайну. Це просто розуміється як робоча відправна точка. Використовуйте обережно. Робоча демонстрація на CodePen
h1 - елемент рівня блоку. Натомість вам потрібно буде використовувати щось на зразок span, оскільки це елемент вбудованого рівня (тобто: він не охоплює весь ряд).
У вашому випадку я б запропонував таке:
style.css
.highlight
{
background-color: green;
}
html
<span class="highlight">only the text will be highlighted</span>
Як зазначають інші відповіді, ви можете додати background-color
а<span>
всього тексту , щоб отримати цю роботу.
У випадку, коли у вас є line-height
, ви побачите прогалини. Щоб виправити це, ви можете додати box-shadow
трохи зріст до свого періоду. Ви також захочете, box-decoration-break: clone;
щоб FireFox візуалізувала його належним чином.
РЕДАКТУВАННЯ: Якщо у вас в IE11 виникають проблеми із тінню, спробуйте додати анекс outline: 1px solid [color];
лише для IE.
Ось як це виглядає в дії:
.container {
margin: 0 auto;
width: 400px;
padding: 10px;
border: 1px solid black;
}
h2 {
margin: 0;
padding: 0;
font-family: Verdana, sans-serif;
text-transform: uppercase;
line-height: 1.5;
text-align: center;
font-size: 40px;
}
h2 > span {
background-color: #D32;
color: #FFF;
box-shadow: -10px 0px 0 7px #D32,
10px 0px 0 7px #D32,
0 0 0 7px #D32;
box-decoration-break: clone;
}
<div class="container">
<h2><span>A HEADLINE WITH BACKGROUND-COLOR PLUS BOX-SHADOW :3</span></h2>
</div>
Спробуйте вийняти центр вирівнювання тексту та відцентрувати <h1>
або <div>
текст знаходиться у ньому.
h1 {
background-color:green;
margin: 0 auto;
width: 200px;
}
можна використовувати html5 знак тег в пункті і заголовок тега.
<p>lorem ipsum <mark>Highlighted Text</mark> dolor sit.</p>
Спробуйте це:
h1 {
text-align: center;
background-color: green;
visibility: hidden;
}
h1:after {
content:'The Last Will and Testament of Eric Jones';
visibility: visible;
display: block;
position: absolute;
background-color: inherit;
padding: 5px;
top: 10px;
left: calc(30% - 5px);
}
Зверніть увагу, що calc сумісний не з усіма веб-переглядачами :) Просто хочеться відповідати вирівнюванню в початковій публікації.
HTML
<h1>
<span>
inline text<br>
background padding<br>
with box-shadow
</span>
</h1>
Css
h1{
font-size: 50px;
padding: 13px; //Padding on the sides so as not to stick.
span {
background: #111; // background color
color: #fff;
line-height: 1.3; //The height of indents between lines.
box-shadow: 13px 0 0 #111, -13px 0 0 #111; // Indents for each line on the sides.
}
}
box-decoration-break: clone;
, developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break
HTML
<h1 class="green-background"> Whatever text you want. </h1>
CSS
.green-background {
text-align: center;
padding: 5px; /*Optional (Padding is just for a better style.)*/
background-color: green;
}
<h1 style="display:inline-block;text-align: center;background : red;">The Last Will and Testament of Eric Jones</h1>