如何将背景应用于内容周围的容器,而不是HTML?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (58)

我想将页面的背景设置为填充内容周围的div容器,而不是使用HTML选择器来设置背景,因为一位老师告诉我这不是一个好的语法。我当前的HTML如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
    <title>Portfolio</title>
</head>
<body>
    <div class="wrapper">
        <!-- NAVIGATION BAR -->
        <div class="clearfix" id="navDiv">
            <nav>

                <header>
                    <h1>Samantha Boleyn</h1>
                </header>

                <ul>
                    <li><a href="index.html">About</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
        </div>

        <!-- MIDDLE SECTION OF PAGE WITH MAIN CONTENT -->
        <div id="mainContent" >
            <h2 id="mainContentHead">About Me</h2>

            <hr/>
            <br/>

    <!-- <div id="profile_img"> -->
            <img id="profile_image" src="assets/images/profile5.png" alt="Profile image of Samantha Boleyn" />
    <!-- </div> -->

            <section id="mainTextDiv" class="clearfix">
                <h2 id="introLineText"><mark class="pinkHighlite">Hi, I'm Samantha and I'm a web developer.</mark></h2>

                <p class="mainText"><mark class="blueHighlite">I've earned a Baccalaureate of Information Science and Technology from the University of Arizona. When I'm not studying web development and creating beautifully-styled and dynamic web pages, I'm working with Microsoft as a Support Engineer.</mark></p>

                <p class="mainText"><mark class="blueHighlite">I'm passionate about my current studies, current and future side projects and everything web development, UI and UX. Check out my work and use the contact form to chat.</mark></p>
            </section>
        </div>
    </div>

    <div class="push"></div>
    <!-- FOOTER AREA OF PAGE -->
    <footer>
        <p id="copyright">Copyright&copy</p>
    </footer>

</body>
</html>

CSS如下所示:

html{
    background: url(../images/hello_background3.jpg);
    background-size: cover;
} 

header{
    float: left;
    padding: 0px;
    background-color: rgb(124,198,254, 0.8);
    font-size: 25px;
    color: #f4faff;
}

#navDiv{
    width: 100%;
    height: 105px;
    background-color: rgb(236,151,193,0.5); 
    border-style: outset;
    border-width: 0px 0px 5px 0px;
    border-radius: 5px;
    border-color: rgba(8, 9, 10, 0.274);
}

nav{
    width: 960px;
    /* background-color: #f4faff; */
    background-color:#08090A; 
    margin: auto;  
}

#mainContent{
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    /* height: 500px; */
    background: rgba(135,137,192, 0.7);
}

h1, h2, h3, h4, h5, h6{
    font-family: 'Georgia', Times, Times New Roman, serif;
}

hr{
    width: 95%;
    margin: auto;
    height: 5px;
    background-color: #f4faff;
}

a{
    text-decoration: none;
    padding: 10px;
    font-size: 20px;
}

ul{
    margin: 0px;
    padding: 47px 0px 47px 47px;
    list-style-type: none;
    float: right;
  }

li{
    display: inline;
    font-size: 20px;
}

li:not(:last-child){
    border-right:solid 1px #f4faff;
}

a{
    color:#f4faff;
}

#profile_image{
    border: 5px solid rgb(117, 119, 174);
    border-radius: 20px;
    width: 20%;
    float: left;
    margin-right:20px;
    margin-bottom:10px;
    margin-top: 0px;
    margin-left: 10px;
}

#mainTextDiv{
    font-size: 25px;
    color: #08090A;
    padding: 10px;
}  

#introLineText{
    font-family: "Arial Black", Gadget, sans-serif;
    /* background-color: rgb(236,151,193,0.7);  */
    font-size: 26px;
    margin-top: 0px;
}

#mainContentHead{
    padding: 30px 0px 30px 30px;
    margin: 0px;
    size: 18px;
    color: #F4FAFF;
}

.blueHighlite{
    background-color: rgb(124,198,254, 0.7);
}

.pinkHighlite{
    background-color: rgb(236,151,193,0.7); 
}

footer {
    background-color: rgba(8, 9, 10, 0.397);
    color: #F4FAFF;
    text-align: center;
    border-width: 5px 0px 0px 0px;
    border-color: rgb(124,198,254, 0.7);
    border-style: solid;
    width: 100%;
}

.fullWidthInput{
    width: 95%;
    margin-left: 23px;
    background-color: #f4faff;
}

.bigTextBox{
    padding: 100px;
    box-sizing: border-box;
    margin-bottom: 10px;
}

form {
    font-size: 20px;
    margin-left: 10px;
    width: 95%;
    margin: auto;
}

.contactForm mark{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    padding: 2px;
}

.button {
    background-color: white; 
    color: black; 
    border: 2px solid  rgb(124,198,254);
    padding: 10px;
}

.button:hover {
    background-color: rgb(124,198,254);
    color: #f4faff;
}

.formField{
    margin-top:5px;
    margin-bottom: 5px;
}

.myWorkImg{
    width: 293px;
    height: 195px;
    /* margin-left: 20px;
    margin-top: 10px; */
    /* position: relative; */
}

.clearfix::after{
    content:""; 
    display: block;
    clear: both;
} 

html, body {
    height: 100%;
    margin: 0;
  }
  .wrapper {
    min-height: 100%;

    /* Equal to height of footer */
    /* But also accounting for potential margin-bottom of last child */
    /* margin-bottom: -35px; */
  }
  .footer,
  .push {
    height: 40px;
  } 

#copyright{
    margin: 0;
    padding-top: 20px;
    padding-bottom: 3px;
}

.relative{
    position: relative;
    width: 293px;
    height: 195px;
    /* margin-right: 0px; */
    float: left;
    /* margin-right: 20px; */
    margin-left: 20px;
    margin-top: 10px;
}

.absolute{
    position: absolute;
    bottom: 10px;
    text-align: center;
    padding: 10px 0;
    background-color: rgb(236,151,193,0.7);
    color: #F4FAFF;
    font-family: "Arial Black", Gadget, sans-serif;
}

.imageBanner{
    width: 100%;
}

.portfolioImgLink{
    padding: 0px;
}

我尝试过HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
    <title>Portfolio</title>
</head>
<body>
    <div class="container ">
    <div class="wrapper">
        <!-- NAVIGATION BAR -->
        <div class="clearfix" id="navDiv">
            <nav>

                <header>
                    <h1>Samantha Boleyn</h1>
                </header>

                <ul>
                    <li><a href="index.html">About</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
        </div>

        <!-- MIDDLE SECTION OF PAGE WITH MAIN CONTENT -->
        <div id="mainContent" >
            <h2 id="mainContentHead">About Me</h2>

            <hr/>
            <br/>

    <!-- <div id="profile_img"> -->
            <img id="profile_image" src="assets/images/profile5.png" alt="Profile image of Samantha Boleyn" />
    <!-- </div> -->

            <section id="mainTextDiv" class="clearfix">
                <h2 id="introLineText"><mark class="pinkHighlite">Hi, I'm Samantha and I'm a web developer.</mark></h2>

                <p class="mainText"><mark class="blueHighlite">I've earned a Baccalaureate of Information Science and Technology from the University of Arizona. When I'm not studying web development and creating beautifully-styled and dynamic web pages, I'm working with Microsoft as a Support Engineer.</mark></p>

                <p class="mainText"><mark class="blueHighlite">I'm passionate about my current studies, current and future side projects and everything web development, UI and UX. Check out my work and use the contact form to chat.</mark></p>
            </section>
        </div>
    </div>

    <div class="push"></div>
    <!-- FOOTER AREA OF PAGE -->
    <footer>
        <p id="copyright">Copyright&copy</p>
    </footer>
</div>
</body>
</html>

对于CSS来说:

html, body {
    height: 100%;
    margin: 0;
  }

.wrapper {
    min-height: 100%;

    /* Equal to height of footer */
    /* But also accounting for potential margin-bottom of last child */
    /* margin-bottom: -35px; */
}

.container{
    background: url(../images/hello_background3.jpg);
    background-size: cover;
    height: 100%;
}

header{
    float: left;
    padding: 0px;
    background-color: rgb(124,198,254, 0.8);
    font-size: 25px;
    color: #f4faff;
}

#navDiv{
    width: 100%;
    height: 105px;
    background-color: rgb(236,151,193,0.5); 
    border-style: outset;
    border-width: 0px 0px 5px 0px;
    border-radius: 5px;
    border-color: rgba(8, 9, 10, 0.274);
}

nav{
    width: 960px;
    /* background-color: #f4faff; */
    background-color:#08090A; 
    margin: auto;  
}

#mainContent{
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    /* height: 500px; */
    background: rgba(135,137,192, 0.7);
}

h1, h2, h3, h4, h5, h6{
    font-family: 'Georgia', Times, Times New Roman, serif;
}

hr{
    width: 95%;
    margin: auto;
    height: 5px;
    background-color: #f4faff;
}

a{
    text-decoration: none;
    padding: 10px;
    font-size: 20px;
}

ul{
    margin: 0px;
    padding: 47px 0px 47px 47px;
    list-style-type: none;
    float: right;
  }

li{
    display: inline;
    font-size: 20px;
}

li:not(:last-child){
    border-right:solid 1px #f4faff;
}

a{
    color:#f4faff;
}

#profile_image{
    border: 5px solid rgb(117, 119, 174);
    border-radius: 20px;
    width: 20%;
    float: left;
    margin-right:20px;
    margin-bottom:10px;
    margin-top: 0px;
    margin-left: 10px;
}

#mainTextDiv{
    font-size: 25px;
    color: #08090A;
    padding: 10px;
}  

#introLineText{
    font-family: "Arial Black", Gadget, sans-serif;
    /* background-color: rgb(236,151,193,0.7);  */
    font-size: 26px;
    margin-top: 0px;
}

#mainContentHead{
    padding: 30px 0px 30px 30px;
    margin: 0px;
    size: 18px;
    color: #F4FAFF;
}

.blueHighlite{
    background-color: rgb(124,198,254, 0.7);
}

.pinkHighlite{
    background-color: rgb(236,151,193,0.7); 
}

footer {
    background-color: rgba(8, 9, 10, 0.397);
    color: #F4FAFF;
    text-align: center;
    border-width: 5px 0px 0px 0px;
    border-color: rgb(124,198,254, 0.7);
    border-style: solid;
    width: 100%;
}

.fullWidthInput{
    width: 95%;
    margin-left: 23px;
    background-color: #f4faff;
}

.bigTextBox{
    padding: 100px;
    box-sizing: border-box;
    margin-bottom: 10px;
}

form {
    font-size: 20px;
    margin-left: 10px;
    width: 95%;
    margin: auto;
}

.contactForm mark{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    padding: 2px;
}

.button {
    background-color: white; 
    color: black; 
    border: 2px solid  rgb(124,198,254);
    padding: 10px;
}

.button:hover {
    background-color: rgb(124,198,254);
    color: #f4faff;
}

.formField{
    margin-top:5px;
    margin-bottom: 5px;
}

.myWorkImg{
    width: 293px;
    height: 195px;
    /* margin-left: 20px;
    margin-top: 10px; */
    /* position: relative; */
}

.clearfix::after{
    content:""; 
    display: block;
    clear: both;
} 

  .footer,
  .push {
    height: 40px;
  } 

#copyright{
    margin: 0;
    padding-top: 20px;
    padding-bottom: 3px;
}

.relative{
    position: relative;
    width: 293px;
    height: 195px;
    /* margin-right: 0px; */
    float: left;
    /* margin-right: 20px; */
    margin-left: 20px;
    margin-top: 10px;
}

.absolute{
    position: absolute;
    bottom: 10px;
    text-align: center;
    padding: 10px 0;
    background-color: rgb(236,151,193,0.7);
    color: #F4FAFF;
    font-family: "Arial Black", Gadget, sans-serif;
}

.imageBanner{
    width: 100%;
}

.portfolioImgLink{
    padding: 0px;
}

问题是,我发现我的容器背景并不适用于Push div和foux。

提问于
用户回答回答于

通过编辑CSS的这一部分似乎解决了这个问题:

html, body {
    height: 100%;
    margin: 0;
  }

.wrapper {
    min-height: 100vh;
}

footer, .push {
    height: 40px;
  } 

.container{
    background: url(../images/hello_background3.jpg);
    background-size: cover;
}
用户回答回答于

您的问题出现在CSS中:

.footer, .push {
    height: 40px;
} 

扫码关注云+社区

领取腾讯云代金券