Html - How Do I Set A Background-color For The Width Of Text, Not The ...
Có thể bạn quan tâm
display: table;
- no parent required
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>
fiddle
http://jsfiddle.net/J7VBV/293/
more
display: table tells the element to behave as a normal HTML table would.
More about it at w3schools, CSS Tricks and here
Option 2display: inline-flex;
- requires text-align: center; on parent
.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>
Option 3display: flex;
- requires a flex parent container
.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>
about
Probably the most popular guide to Flexbox and one I reference constantly is at CSS Tricks
Option 4display: block;
- requires a flex parent container
.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>
Option 5::before
- requires entering words in css file (not very practical)
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>
fiddle
http://jsfiddle.net/J7VBV/457/
about
More about css pseudo elements ::before and ::after at CSS Tricks and pseudo elements in general at w3schools
Option 6display: inline-block;
centering with position: absolute and translateX
requires a position: relative parent
.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>
about
More on centering with transform: translate(); (and centering in general) in this CSS tricks article
Option 7text-shadow: and box-shadow:
- not what the OP was looking for but maybe helpful to others finding their way here.
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>
fiddle
https://jsfiddle.net/Hastig/t8L9Ly8o/
More OptionsThere are a few other ways to go about this by combining the different display options and centering methods above.
Từ khóa » Html Color Text Background
-
HTML Styles - W3Schools
-
Background Color - Tryit Editor V3.7
-
Change HTML Background Color Or Font Color - BitDegree
-
How To Add & Change Background Color In HTML - HubSpot Blog
-
Font Colors And Backgrounds - HTML Test Suite For UAAG 1.0 (Draft)
-
In HTML, How Do I Change The Color Of The Text And Background Of A ...
-
HTML Colors, Text, Background And Border
-
HTML Text Color - HTML Color Codes
-
HTML Color Code For Background And Text On Web Page
-
#FFFFFF (White) HTML Color Code - Computer Hope
-
How To Highlight Text In Color Using HTML And CSS - Computer Hope
-
Background Color
-
Background-color - CSS: Cascading Style Sheets - MDN Web Docs