Question

使用Dreamweaver，经过一些小的css调整后，我的身体背景不会出现。我已将其更改为纯色以查看链接是否已损坏，但充其量，当我在浏览器中打开它时，它显示半秒，然后变为白色。我真的很困惑。

我无法确定它是如何开始的，因为我的背景曾经在那里固定，而其他的div会翻过它的顶部。现在，它已经成为白色空间。

这是我的代码：

＆＃13;

 rel="stylesheet">@charset "utf-8";
/* CSS Document */

.bodydiv {
    background:red;url(Images/backgroundp1.jpg) ;
    background-size: cover;
    width:100%;
    padding:0;
    margin:0;


}

/* Font families : font-family: 'Cabin Sketch', cursive;
font-family: 'Averia Sans Libre', cursive;* font-family: 'Special Elite', cursive;*/




.page1 {
    margin-right: auto;
    margin-left : auto;
    width: 100%;
    height:40em;
    background-size:cover;
    padding: 0;
    margin: 0;


}


#me {
    grid-column: 2;
    display:block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-top: 7em

}

h1{
    text-align: center;
    font-size: 4em;
    font-family: 'Cabin Sketch';
}

p {
    font-family: 'Special Elite', cursive;
    line-height: 180%;
}

h3 {
    font-family: 'Cabin Sketch';
    text-transform: capitalize;
}



.page1content{
    width: 800px;
    height: 800px;
    margin-left: auto;
    margin-right: auto;
}


.page2{
    background:  url(Images/DSC04168.jpg) center center ;
    background-size: cover;
    height: 50em;
    padding-bottom: -10;
    margin-bottom: 0;

}

.page3{
    background: url(Images/DSC00472.jpg) center center;
    background-size: cover;
    height:50em;
    padding-top: 0;
    padding-bottom: 0;
}

.page4 {
    display:grid;
    grid-template-columns: 50% 50%;
    height: 70em

}

.page4a {
    grid-column: 1;
    background: rgba(81,81,81,1.00);
    color:rgba(198,198,198,1.00);
    display: grid;
    grid-template-columns: 15% auto 15%;
    grid-template-rows: 15% auto 15%;
}

.aboutme {
    grid-column: 2;
    grid-row: 2;
}

.page4b {
    grid-column: 2;
    background: rgba(198,198,198,1.00);
    color: rgba(81,81,81,1.00);
    display:grid;
    grid-template-columns: 15% auto 15%;
    grid-template-rows: 15% auto 10%;
}

.form {
    grid-column: 2;
    grid-row: 2;
}

input[type], select{
    width: 100%;
    padding: 12px 20px;
    margin: 8px;
    display: inline-block;
    border 2px solid;
    border-radius: 5px;
    box-sizing: border-box;
    background-color: rgba(81,81,81,1.00);
    color: rgba(198,198,198,1.00)

}

input[type=text]:focus {
    border: 2px solid rgba(81,81,81,1.00) ;
}

textarea{
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: rgba(81,81,81,1.00);
    font-size: 16px;
    resize: none;
}

input[type=submit] {
    width: 33%;
    background-color:rgba(198,198,198,1.00) ;
    color: rgba(81,81,81,1.00);
    padding: 14px 20px;
    margin: 8px 0;
    border: 2px solid rgba(81,81,81,1.00);
    border-radius: 4px;
    cursor: pointer;
}

＆＃13;

<!doctype html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Averia+Sans+Libre|Cabin+Sketch|Special+Elite" rel="stylesheet">
    <link rel="stylesheet" href="s">
<meta charset="utf-8">
<title>Mrhuggies-portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>



<body>

<div class="bodydiv">       

    <div class="page1">

         <div class="page1content">
               <img id="me" src="Images/pof2.png" width="600" height="370px" alt="Picture of Thomas Hughes"/>
<h1>ThomasHughesPortfolio<br>WebDesigner/Photographer</h1>
      </div>
</div>


    <div class="page2">

        </div>


    <div class="page3">

    </div>

    <div class="page4">

        <div class="page4a">
            <div class="aboutme">
                <h3>About Me</h3>
                <p> Hello, I'm a 25 year old that goes by the name of Thomas Hughes, based in <b>Glagow</b>. I design UI/UX whlist writing all of my own code. I enjoy making something beautiful, functional and enjoyable to use and browse. Solving problems, <b>capturing beauty</b> and a keen eye for design is where my passions lie. 
                    Adept at Photoshop, Dreamweaver and getting to grips with other programmes that Adobe Suit has to offer.
                    Feel free to get in touch with any free-lance <b>opportunities</b> or job proposals</p>
                </div>
        </div>
    <div class="page4b">
        <div class="form">
        <h3><b>I want</b> to hear from you</h3>

        <p>Want to talk about a job, see how I'm doing or maybe ask me out for a coffee?</p>

            <form action="">
            <label for="name"></label>
                <input type="text" id="name" name="firstName" placeholder="Your name..."


                <label for="name"></label>
                <input type="text" id="name" name="firstName" placeholder="Email..."


            <label for="name"></label>
                <textarea><input type="text" id="name" name="firstName" placeholder="Write your message in here..."></textarea>


        <input type="submit" value="Send Message">




                       </form>


                       </fom>
        </div>
        </div>  
    </div>



    </div>
    </body>
</html>

＆＃13;

Answer 1

在这里

background:red;url(Images/backgroundp1.jpg);

＆＃34; red＆＃34;之后应该有一个逗号，而不是分号：

background:red, url(Images/backgroundp1.jpg);

否则url(Images/backgroundp1.jpg);是一个（无意义的）规则。

Answer 2

使用简写显示纯色背景图像的正确方法是

background: red url('Images/backgroundp1.jpg');

声明中不应该有逗号或分号。见https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#Background_Properties

我的背景消失了

2 个答案: