帶有背景圖片的頁面頂部和左側的邊框

我正在將一個非常基本的網站作爲我大學課程的一部分。我已經放入了背景圖片，並且它幾乎完全吻合 - 但由於某種原因，我在圖片頂部有一個白色邊緣（約一英寸厚），左邊有一個白色邊緣（大約半英寸）。帶有背景圖片的頁面頂部和左側的邊框

這裏是我的形象CSS：

#image { 

    width: 100% 100%; 
    position: fixed; 
    z-index: -9; 
    opacity: 0.8; 
    display: block; 
    background-size: cover; 
}

我已經把背景圖像中的HTML只是口主體標籤之後，因爲這：

<img id="image" src="CourseworkImages/background2.jpg" alt="Background Image">

我不知道爲什麼我有頁面上的這些邊距和他們破壞了頁面的外觀 - 任何幫助都非常感謝！

感謝

來源

2017-04-13 Conor

嘿！歡迎來到Stack Overflow。你的問題可以使用更多的代碼來幫助我們。請閱讀這裏瞭解如何創建[MCVE]。 – amflare

是否有你使用'img'而不是使用CSS的原因？像'body {background-image：url（'/path/to/image.jpg'）;'。 – hungerstar

'html，body {padding：0，margin：0}' – sol

而不是使用img標籤像你這樣我會使用CSS建議。例如：

body { 
    background-image: url('/path/to/image.jpg'); 
}

您可以擺脫很多您使用此方法使用的屬性。你可能想保留的那個是background-size。

正如其他人所指出的那樣，大多數瀏覽器增加保證金的8px導向創建多餘空白區域的body元素。要刪除它，請將margin: 0;添加到上面的CSS選擇器中。

爲了保持不透明度，我會在身體上使用僞元素。您也可以創建一個具有所需的不透明度的PNG。使用CSS更靈活一些。

body { 
 
    position: relative; 
 
    margin: 0; 
 
    min-height: 100vh; 
 
    background-color: hotpink; 
 
} 
 

 
body:before { 
 
    content: ' '; 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: -1; 
 
    opacity: 0.6; 
 
    background-image: url('http://placekitten.com/1600/1600'); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
}

來源

2017-04-13 14:14:32 hungerstar

這工作 - 非常感謝。快速跟進問題;我現在該如何改變背景圖片的屬性？我想改變不透明度，但不知道如何做到這一點，現在它全部在CSS中... – Conor

您可以使用PNG內置的不透明度創建圖像，也可以使用類似於您開始使用但使用僞元素。我會在幾分鐘後更新。 – hungerstar

優秀，謝謝！ – Conor

-1

非常基本的例子：

body { 
    margin: 0; 
    padding: 0; 
    border: 1px solid yellow; 
    border-right-style: none; 
    border-bottom-style: none; 
    width: 100%; 
    opacity: 0.8; 
    display: block; 
    background-size: cover; 
    background-image: url("CourseworkImages/background2.jpg"); 
}

你也可以用一個包裝DIV做到這一點。您可能還需要玩background-position和repeat屬性。而且您還需要重置瀏覽器的默認邊距和填充以便在它們之間確實沒有空間。正如我所說的，基本的例子。如果你對這個主題感興趣，你可以看看CSS框架，它重置所有瀏覽器預定義的樣式， G。 normalize.css

來源

2017-04-13 14:29:32 alpham8

將'opacity'添加到'body'將導致所有後代元素共享該不透明度，[JSFiddle]（https://jsfiddle.net/1mbjdvr0/）。更不用說不影響背景圖片的不透明度了。 – hungerstar

好吧，我只是複製提問者的每個屬性。但是，這個答案應該解決這個問題。 – alpham8

盲目複製屬性並不能解決**的問題。在[**你的解決方案**]（https://jsfiddle.net/1mbjdvr0/1/）中'body'的所有內容都有不透明的應用（不好），背景圖像沒有像你那樣的不透明/透明通過圖像看不到任何黃色背景（不是OP想要的）。 – hungerstar

帶有背景圖片的頁面頂部和左側的邊框

回答

相關問題