2017-02-28 37 views
0

我正在評論HTML和CSS現在和CSS有點問題。如何在不影響文本本身的情況下保留寬度小於文本寬度的背景?

這裏是我正在處理的代碼。

html { 
    background:url(badd.jpg) no-repeat center center fixed; 
    background-size:cover; 
} 
h1{ 
    text-align:center; 
    color:#008080; 
    font-family:arial; 
    text-shadow:1px 1px black; 
    font-size:50px; 
    border:1px 1px black; 
} 
h3 { 
    text-align:center; 
    font-size:30px; 
    font-family:arial; 
    border:2px solid black; 
    color:#008080; 
    text-shadow:1px 1px black; 
    margin-left:500px; 
    margin-right:500px; 
} 
.table { 
    list-style:none; 
} 
a:link{ 
    color:black; 
    text-decoration:none; 
    font-size:18px; 
    font-family:arial; 
    font-weight:bold; 
    display:block; 
    margin-left:auto; 
    margin-right:auto; 
    text-align:center; 
    transition:1s; 
} 
a:hover{ 
    color:gray; 
    text-decoration:underline; 
} 
a:visited{ 
    color:gray; 
} 
a:active{ 
    color:black; 
    background-color:none; 
} 
h2 { 
    text-align:center; 
    font-family:arial; 
    font-size:30px; 
    display:block; 
    background:white; 
    margin-left:auto; 
    margin-right:auto; 
    width:200px; 
} 

<html> 
<head> 
    <title> Kenneth's next exercise </title> 
    <link rel="stylesheet" type="text/css" href="cssforkenneth.css"> 
    </head> 
    <body> 
    <h1> Kenneth's new site </h1> 
    <br> 
    <h3> Introduction </h3> 
    <br> 
    <p class="first"> I'm Kenneth, this is the website I'm working on. It contains pretty much an autobiographical background on me. Have a look and let me know if you find this whole thing pretty interesting. Any kind of feedback on my website is welcomed. </p> 
    <br> 
    <p class="second"> Best of regards, Kenneth Steven McAusland </p> 
    <br> 
    <h3> Table of Contents </h3> 
    <ul class="table"> 
     <li><a href="#Early Life">Early Life</a></li> 
     <li><a href="#Middle School">Middle School</a></li> 
     <li><a href="#High School">High School</a></li> 
     <li><a href="#College">The frat boy who isn't a frat boy.</a></li> 
     <li><a href="#Adult">Life as an "adult"</a></li> 
     <li><a href="#Future">Future Life and Goals</a></li> 
    </ul> 
    <br> 
    <h2><a name="Early Life"></a> Early Life </h2> 
    <br> 
    <p> Born in October 26, 1989 in Hopewell, Virginia. Don't know much of the place but I heard from friends that came from there that it's pretty nice. I moved a little afterwords after my first birthday to Frankfurt, Germany. Ughh... don't know much about it. I remember riding in a Blackhawk helicopter though. Moved again, this time to Busan, South Korea when they had Camp Hialea opened up for service. Moved again, this time to Fort Hood, Texas. Stayed there until I was in 3rd grade. </p> 
    <br> 
    <h2><a name="Middle School"></a> Middle school </h2> 
    <br> 
    <p> I moved again to a very important piece of life, Japan. This was actually pretty up and down. Not too many downs to go with the ups and vice versa. The time I spent here from the later half of elementary to the middle of middle school was, well just okay. I look at it like I understood exactly the better parts of darker things in military life. Namely that it's ghetto as fuck. No, I'm being serious, military kids and their families are ghetto as hell. Had my first girlfriend here, had my first group of close friends everywhere. Met guys who tried to act hard core. So on and so on. 
    <br> 
    I can remember a lot of some great stuff. There are bad things as well but it gave me the reality of what life can be like. It definitely got a lot better as I moved on away to Korea to start the rest of my schooling in Korea. </p> 
    <br> 
    <h2><a name="High School"></a> High School </h2> 
    <br> 
    <p> It. Was. Dope. Nuff said. </p> 
    <br> 
    <h2><a name="College"></a> College </h2> 
    <br> 
    <p> I'm getting tired of typing. College at Texas State University was dope. Hugo was dope. Chase is cool. Clay's my nigga. Bobby's gay. Josh is gay too but he aint gay like that, he still cool. Bobby's just gay. Seriously that dude looks like a homeless hippy. He looks like a donkey whipped his ass and forgot to leave the toilet paper out of his ass crack. </p> 
    <br> 
    <p class="third"> But damn the booty everywhere. </p> 
    <br> 
    <h2><a name="Adult"></a> Adult </h2> 
    <br> 
    <ul class="list"> 
     <li> It </li> 
     <li> Is </li> 
     <li> So </li> 
     <li> Stressful </li> 
    </ul> 
    <br> 
    <h2><a name="Future"></a> Future </h2> 
    <br> 
    <p> Life is holding a lot of unknowns. I'm making due with everything I have to do and what I need to do. I'm keeping my head up when I can and when I need to. I will not stop trying until I'm beaten down to a pulp by someone else. Right now, I'm studing HTML/CSS/JAVASCRIPT/PHP and then moving on to Django, Angular JS, JQuery, ASP, etc. I'm about half way there now and I'm not planning on stopping anytime soon. </p> 
    </body> 
    </html> 

我想要做的就是我的H2的白色背景獲得的寬度比文本本身的寬度降低。我似乎無法在不影響文本的情況下做到這一點,因此它本身「崩潰」。我需要做些什麼來防止再次發生?希望我清楚,你們明白我在說什麼。

+1

請包括您的HTML標記,以便我們可以重現該問題。 – Santi

+0

請發佈您的HTML代碼,因爲這會讓您的問題容易回答 –

回答

2

您可以使用僞元素。設置h2inline-blockfloat它使得元件符合文本的大小,並且無論使用leftright或僞元素上width控制寬度

body { 
 
    background: #09c; 
 
} 
 
h2 { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
h2:before { 
 
    content: ''; 
 
    background: white; 
 
    position: absolute; 
 
    top: 0; bottom: 0; 
 
    left: 20%; right: 20%; 
 
    z-index: -1; 
 
}
<h2>this is a bunch of text</h2>

相關問題