Chcę, aby zielone tło znajdowało się tuż za tekstem, a nie na 100% szerokości strony. Oto mój obecny kod:
h1 {
text-align: center;
background-color: green;
}
<h1>The Last Will and Testament of Eric Jones</h1>
Chcę, aby zielone tło znajdowało się tuż za tekstem, a nie na 100% szerokości strony. Oto mój obecny kod:
h1 {
text-align: center;
background-color: green;
}
<h1>The Last Will and Testament of Eric Jones</h1>
Odpowiedzi:
Umieść tekst w elemencie wbudowanym , takim jak <span>
.
<h1><span>The Last Will and Testament of Eric Jones</span></h1>
Następnie zastosuj kolor tła w elemencie wbudowanym.
h1 {
text-align: center;
}
h1 span {
background-color: green;
}
Element wbudowany jest tak duży, jak jego zawartość, więc powinno to zrobić za Ciebie.
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>
skrzypce
http://jsfiddle.net/J7VBV/293/
więcej
display: table
mówi elementowi, aby zachowywał się tak jak normalna tabela HTML.
Więcej o tym w w3schools , CSS Tricks i tutaj
display: inline-flex;
text-align: center;
od rodzica.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>
o
Prawdopodobnie najpopularniejszy przewodnik po Flexbox, do którego ciągle się odwołuję, znajduje się w 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>
skrzypce
http://jsfiddle.net/J7VBV/457/
o
Więcej o pseudo elementach CSS :: before i :: after na CSS Tricks i ogólnie o pseudo elementach na w3schools
display: inline-block;
centrowanie za pomocą position: absolute
itranslateX
wymaga position: relative
rodzica
.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>
o
Więcej o centrowaniu z transform: translate();
(i ogólnie centrowaniu) w tym artykule o sztuczkach CSS
text-shadow:
i 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>
skrzypce
https://jsfiddle.net/Hastig/t8L9Ly8o/
Jest na to kilka innych sposobów, łącząc różne opcje wyświetlania i metody środkowania powyżej.
display: table
mogą być tak potężne, ale doceniam, że zapewniłeś działające alternatywy.
Trochę późno na grę, ale pomyślałem, że dodam moje 2 centy ...
Aby uniknąć dodawania dodatkowego znacznika wewnętrznego zakresu, możesz zmienić <h1>
właściwość wyświetlania z block
na inline
(złapać, aby upewnić się, że elementy po <h1>
są elementami blokowymi.
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;
}
Wynik
JSFIDDLE
http://jsfiddle.net/J7VBV/
Bardzo prostą sztuczką jest dodanie <span>
tagu i dodanie do niego koloru tła. Będzie wyglądać tak, jak chcesz.
<h1>
<span>The Last Will and Testament of Eric Jones</span>
</h1>
I CSS
h1 { text-align: center; }
h1 span { background-color: green; }
<span>
w tagu elementu wbudowanego, więc będzie obejmował tylko treść udającą efekt.
Główną kwestią, którą inni zaniedbują, jest to, że OP stwierdził, że nie może modyfikować HTML.
Możesz kierować na to, czego potrzebujesz w DOM, a następnie dodawać klasy dynamicznie za pomocą javascript. Następnie stylizuj według potrzeb.
W utworzonym przeze mnie przykładzie skierowałem wszystkie <p>
elementy za pomocą jQuery i otoczyłem go elementem div z klasą „coloured”
$( "p" ).wrap( "<div class='colored'></div>" );
Następnie w moim CSS wycelowałem <p>
i nadałem mu kolor tła i zmieniłem nadisplay: inline
.colored p {
display: inline;
background: green;
}
Ustawiając wyświetlacz jako wbudowany, tracisz część stylu, który normalnie by dziedziczył. Dlatego upewnij się, że celujesz w najbardziej konkretny element i stylizujesz kontener tak, aby pasował do reszty projektu. Jest to tylko punkt wyjścia do pracy. Używaj ostrożnie. Działające demo na CodePen
h1 jest elementem blokowym. Będziesz musiał użyć czegoś takiego jak span, ponieważ jest to element liniowy (tj. Nie obejmuje całego wiersza).
W twoim przypadku proponuję co następuje:
style.css
.highlight
{
background-color: green;
}
html
<span class="highlight">only the text will be highlighted</span>
Jak zauważają inne odpowiedzi, możesz dodać background-color
do<span>
wokół tekstu, aby to zadziałało.
W przypadku, gdy line-height
jednak masz, zobaczysz luki. Aby to naprawić, możesz dodać box-shadow
trochę wzrostu do swojej rozpiętości. Będziesz także chcą box-decoration-break: clone;
dla FireFox, aby uczynić go prawidłowo.
EDYCJA: Jeśli masz problemy w IE11 z box-shadow, spróbuj dodać outline: 1px solid [color];
również tylko dla IE.
Oto jak to wygląda w akcji:
.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>
Spróbuj usunąć środek wyrównania tekstu i wyśrodkować <h1>
lub <div>
tekst znajduje się w środku .
h1 {
background-color:green;
margin: 0 auto;
width: 200px;
}
może używać znacznika znacznika HTML5 w tagu akapitu i nagłówka.
<p>lorem ipsum <mark>Highlighted Text</mark> dolor sit.</p>
Spróbuj tego:
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);
}
Pamiętaj, że kalkulator nie jest kompatybilny ze wszystkimi przeglądarkami :) Po prostu chcę być spójny z wyrównaniem w oryginalnym poście.
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>