用CSS執行該技術
如果你正在設計一個網站，你可能有興趣學習如何在網頁上創建一個固定的背景圖像或水印。 這是一種常見的設計處理，已經在相當長一段時間內在網上流行。 在你的網頁設計中包含一些技巧是很方便的。
如果你以前沒有做過或者以前沒有嘗試過，那麼這個過程看起來可能很嚇人，但實際上並不是非常困難。 通過這個簡短的教程，您將在幾分鐘內使用CSS獲得掌握該技術所需的信息。
入門
背景圖像或水印（實際上只是非常淺的背景圖像）在印刷設計中有歷史。 長期以來，文件中都包含水印以防止它們被複製。 此外，許多傳單和小冊子都使用大型背景圖片作為印刷品設計的一部分。 網頁設計長期以來從印刷和背景中藉用風格，這些借用風格就是其中的一種。
使用以下三種CSS樣式屬性可以輕鬆創建這些大型背景圖片：
- 背景圖
- 背景重複
- 背景附件
- 背景大小
背景圖
您將使用背景圖像來定義將用作水印的圖像。 這種風格只是使用文件路徑來加載您網站上的圖片，可能位於名為“圖片”的目錄中。
background-image：url（/images/page-background.jpg）;
重要的是圖像本身比正常圖像更輕或更透明。 這將創建一個半透明圖像位於網頁的文本，圖形和其他主要元素後面的“水印”外觀。 如果沒有這一步，背景圖片將與您網頁上的信息相互競爭，難以閱讀。
您可以在任何編輯程序（如Adobe Photoshop）中調整背景圖像。
背景重複
接下來是後台重複屬性。 如果你希望你的圖像是一個大的水印風格的圖形，你可以使用這個屬性來使該圖像只顯示一次。
背景重複：不重複;
如果沒有“不重複”屬性，默認情況是圖像將在頁面上一遍又一遍地重複。 這在大多數現代網頁設計中是不可取的，所以這種風格在你的CSS中應該被認為是必不可少的。
背景附件
背景附件是很多網頁設計師都忘記的屬性。 使用它可以讓您的背景圖像在使用“固定”屬性時保持固定。 這是將圖像轉換為固定在頁面上的水印。
此屬性的默認值是“滾動”。 如果您未指定背景附件值，背景將隨頁面的其餘部分一起滾動。
background-attachment：fixed;
背景尺寸
Background-size是一個較新的CSS屬性。 它允許您根據正在查看的視口設置背景的大小。這對於在不同設備上以不同尺寸顯示的響應式網站非常有用。
background-size：cover;
您可以使用這個屬性的兩個有用的值包括：
- 封面 - 縮放背景，以顯示全寬或全高。 這意味著圖像的某些部分可能不會出現在屏幕上，但會覆蓋整個區域。
- 包含 - 縮放圖像，使整個寬度和高度均顯示在正在設計的區域中。 圖像沒有被切斷，但缺點是該區域的部分區域可能未被圖像覆蓋。
將CSS添加到您的頁面
在了解了上述屬性及其值之後，您可以將這些樣式添加到您的網站中。
如果您製作單頁網站，請將以下內容添加到網頁的HEAD中。 如果要構建多頁面網站並希望利用外部工作表的功能，請將其添加到外部樣式表的CSS樣式中。
<風格>
<！ -
身體 {
background-image：url（/images/page-background.jpg）;
背景重複：不重複;
background-attachment：fixed;
background-size：cover;
}
// - >
更改背景圖像的URL以匹配與您的網站相關的特定文件名和文件路徑。 進行其他適當的更改以適應您的設計，並且您將擁有水印。
你可以指定位置，也可以
如果你想在你的網頁上的特定位置放置水印，你也可以這樣做。 例如，您可能需要在頁面中間或可能位於下角的水印，而不是默認的頂角。
為此，請將background-position屬性添加到您的樣式中。 這會將圖像置於您希望顯示的確切位置。 您可以使用像素值，百分比或對齊來實現該定位效果。
background-position：center;