整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
家好，我是大澈！
本文約 700+ 字，整篇閱讀約需 1 分鐘。
每日分享一段優(yōu)質代碼片段。
今天分享一段 CSS 代碼片段，使用 CSS 設置網頁全屏背景圖片，很簡單。
老規(guī)矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評論區(qū)留下你的見解！
html {
background: url('images/bg.jpg') no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover; /* 適用于舊版 WebKit 瀏覽器 */
-moz-background-size: cover; /* 適用于舊版 Firefox 瀏覽器 */
-o-background-size: cover; /* 適用于舊版 Opera 瀏覽器 */
}分享原因
這段代碼展示了如何使用 CSS 設置網頁全屏背景圖片，使其在不同瀏覽器中都能完美適應屏幕尺寸。
這對于創(chuàng)建具有視覺吸引力且兼容性良好的網頁非常重要。
代碼解析
1. background: url('images/bg.jpg') no-repeat center center fixed;
background：簡寫屬性，用于設置所有背景屬性。
url('images/bg.jpg')：指定背景圖像的路徑。
no-repeat：背景圖像不重復顯示。
center center：背景圖像在水平方向和垂直方向都居中顯示。
fixed：背景圖像固定在視口中，即使頁面滾動，背景圖像也不會移動。
2. background-size: cover;
background-size: cover：使背景圖像按比例縮放，以完全覆蓋背景區(qū)域。這意味著圖像可能會被裁剪以適應容器。
3. 瀏覽器前綴的使用
-webkit-background-size：適用于舊版 WebKit 瀏覽器（如舊版 Safari 和 Chrome）。
-moz-background-size：適用于舊版 Firefox 瀏覽器。
-o-background-size：適用于舊版 Opera 瀏覽器。
這些瀏覽器前綴用于處理舊版瀏覽器的兼容性問題。雖然現代瀏覽器大多已經支持標準的 background-size 屬性，但在代碼中加入這些前綴可以確保在老舊瀏覽器中也能正常顯示背景圖片。
- end -
色大氣全屏背景通用登錄頁面html模板是一款適用于PC端和手機端的登錄界面模板、APP登錄界面模板。現在就業(yè)非常重要的一個項目你準備好了嗎？下午小編教你從無到有的敲代碼敲出自己博客最重要的項目 高薪就業(yè)輕松2倍。
<!DOCTYPE html>
<html lang="en">
<head>
<title>藍色登錄界面HTML代碼</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--圖標樣式-->
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--布局框架-->
<link rel="stylesheet" type="text/css" href="css/util.css">
<!--主要樣式-->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="limiter">
<div class="container-login100" style="background-image: url('images/img-01.jpg');">
<div class="wrap-login100 p-t-190 p-b-30">
<form class="login100-form validate-form">
<div class="login100-form-avatar">
<img src="images/avatar-01.jpg" alt="AVATAR">
</div>
<span class="login100-form-title p-t-20 p-b-45">Hello</span>
<div class="wrap-input100 validate-input m-b-10" data-validate="請輸入用戶名">
<input class="input100" type="text" name="username" placeholder="用戶名" autocomplete="off">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-user"></i>
</span>
</div>
<div class="wrap-input100 validate-input m-b-10" data-validate="請輸入密碼">
<input class="input100" type="password" name="pass" placeholder="密碼">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-lock"></i>
</span>
</div>
<div class="container-login100-form-btn p-t-10">
<button class="login100-form-btn">登 錄</button>
</div>
<div class="text-center w-full p-t-25 p-b-230">
<a href="#" class="txt1">忘記密碼？</a>
</div>
<div class="text-center w-full">
<a class="txt1" href="#">
立即注冊
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</form>
</div>
</div>
</div>
<script src="vendor/jquery/jquery-1.12.4.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
大家需要這個項目css代碼，js，圖片做練習的可以找我免費領取，如果大家不怕麻煩可以關注我后私信我“前端學習資料”幾個字 找我領取 24小時在線！
CSS中，背景樣式主要包括背景顏色和背景圖像。在傳統(tǒng)的布局中，只能使用少數的標簽來定義背景圖像和背景顏色。但是隨著Web2.0時代的到來，設置背景樣式不再使用傳統(tǒng)HTML屬性來定義，轉而使用無限制、更靈活的CSS來定義。
目標
在CSS中，使用background-color屬性來定義元素的背景顏色。
語法：background-color:顏色值;
說明：顏色值是一個關鍵字或一個16進制的RGB值。
HTML標簽
背景顏色設置
效果
在CSS中，使用background-image屬性來定義元素的背景圖片。
語法：background-image:url("圖像地址");
說明：圖像地址可以是相對地址，也可以是絕對地址。
注意：給某個元素設置背景圖像，元素要有一定的寬度和高度，背景圖片才會顯示出來。如果設置的元素的寬高過小，背景圖片就無法完整地顯示出來了。
設置背景圖片
效果
在CSS中，使用background-repeat屬性可以設置背景圖像是否平鋪，并且可以設置如何平鋪。
語法：background-repeat:取值;
取值
當值是repeat，全屏覆蓋
全屏覆蓋
當值是repeat-x，x軸方向覆蓋
x軸方向覆蓋
當值是repeat-y，y軸方向覆蓋
y軸方向覆蓋
當值是no-repeat，不復制
不復制
在CSS中，使用background-position設置背景圖像的位置
語法：background-positon:像素值/關鍵字;
說明：語法中的取值包括兩種，一種是采用像素值，另一種是關鍵字描述。
1. 像素值
要設置水平方向數值（x軸）和垂直方向數值（y軸），參數如下
取值
假設設置一個距離左上角水平方向100px，垂直方向100px
背景圖片位置設置
效果如下
效果
2. 關鍵字
當background-position取值為關鍵字時，也需要設置水平方向和垂直方向的值，只不過值不是使用px為單位的數值，而是使用關鍵字代替。
取值
假設我們要設置一個水平方向、垂直方向都居中的位置，就可以這樣設置
背景圖片位置設置
這樣他就永遠都處于屏幕的正中間
效果
在CSS中，使用背景附件屬性background-attachment可以設置背景圖像是隨對象滾動還是固定不動
語法：background-attachment:scroll/fixed;
說明：background-attachment 屬性只有2個屬性值。scroll表示背景圖像隨對象滾動而滾動，是默認選項；fixed表示背景圖像固定在頁面不動，只有其他的內容隨滾動條滾動。
背景固定設置
效果
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
