將背景圖片僅限於身體

我有背景，但是當我做出頁腳時，身體的背景圖像跨越到頁腳;我怎樣才能將這個背景限制在身體上？這裏是我的代碼：將背景圖片僅限於身體

body { 
 
    font-family: 'Open Sans', sans-serif; 
 
    background: #282828; 
 
    color: #fff; 
 
    padding-top: 20px; 
 
    background: linear-gradient(-45deg, #EE7752, #E73C7E, #FF7F50, #23A6D5, #FF7F50); 
 
    background-size: 400% 100%; 
 
    background-repeat: no-repeat; 
 
    -webkit-animation: Gradient 15s ease infinite; 
 
    -moz-animation: Gradient 15s ease infinite; 
 
    animation: Gradient 15s ease infinite; 
 
}

<div class="footer"> 
 
    <p>Posted by: asds</p> 
 
    <p>Contact information: <a href="mailto:[email protected]"> 
 
    [email protected]</a>.</p> 
 
</div>

來源

2017-04-05 user7678931

我沒有看到一個背景圖片？如果您不想讓身體的背景顯示出來，請在頁腳上設置背景。 – Slime

頁腳是'body'的一部分，所以如果你想要一個不同的頁腳背景，你必須爲頁腳定義一個背景。或者，不要將背景放在'body'上，而是爲'body'中的'body'內容創建一個容器，該容器不包含頁腳代碼並將背景應用於該內容。 – APAD1

只要給您的頁腳的背景顏色。該<body>默認爲白色，嘗試添加

.footer { 
    background: #ffffff; 
}

當然，你會在下面的例子中注意到，在底部和邊緣再次背景。您可以爲APAD1提到的，改變你的HTML結構，或者從<body>刪除默認的保證金和調整你的頁腳一些

body { 
 
    font-family: 'Open Sans', sans-serif; 
 
    background: #282828; 
 
    color: #fff; 
 
    padding-top: 20px; 
 
    background: linear-gradient(-45deg, #EE7752, #E73C7E, #FF7F50, #23A6D5, #FF7F50); 
 
    background-size: 400% 100%; 
 
    background-repeat: no-repeat; 
 
    -webkit-animation: Gradient 15s ease infinite; 
 
    -moz-animation: Gradient 15s ease infinite; 
 
    animation: Gradient 15s ease infinite; 
 
} 
 

 
.footer { 
 
    background: #ffffff; 
 
}

<div class="footer"> 
 
    <p>Posted by: asds</p> 
 
    <p>Contact information: <a href="mailto:[email protected]"> 
 
    [email protected]</a>.</p> 
 
</div>

來源

2017-04-05 17:39:00

將背景圖片僅限於身體

回答

相關問題