2017-02-28 52 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>

相关问题