Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 中文字幕不卡,91在线|porny|欧美,国产日韩精品一区在线不卡 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          網(wǎng)頁背景全屏就這？分享 1 段優(yōu)質(zhì) CSS 代碼片段！
          
        
           
          
	
	
          
		
                        
          家好，我是大澈！
          本文約 700+ 字，整篇閱讀約需 1 分鐘。
          每日分享一段優(yōu)質(zhì)代碼片段。
          今天分享一段 CSS 代碼片段，使用 CSS 設(shè)置網(wǎng)頁全屏背景圖片，很簡單。
          老規(guī)矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評(píng)論區(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 設(shè)置網(wǎng)頁全屏背景圖片，使其在不同瀏覽器中都能完美適應(yīng)屏幕尺寸。
          這對(duì)于創(chuàng)建具有視覺吸引力且兼容性良好的網(wǎng)頁非常重要。
          代碼解析
          1. background: url('images/bg.jpg') no-repeat center center fixed;
          background：簡寫屬性，用于設(shè)置所有背景屬性。
          url('images/bg.jpg')：指定背景圖像的路徑。
          no-repeat：背景圖像不重復(fù)顯示。
          center center：背景圖像在水平方向和垂直方向都居中顯示。
          fixed：背景圖像固定在視口中，即使頁面滾動(dòng)，背景圖像也不會(huì)移動(dòng)。
          2. background-size: cover;
          background-size: cover：使背景圖像按比例縮放，以完全覆蓋背景區(qū)域。這意味著圖像可能會(huì)被裁剪以適應(yīng)容器。
          3. 瀏覽器前綴的使用
          -webkit-background-size：適用于舊版 WebKit 瀏覽器（如舊版 Safari 和 Chrome）。
          -moz-background-size：適用于舊版 Firefox 瀏覽器。
          -o-background-size：適用于舊版 Opera 瀏覽器。
          這些瀏覽器前綴用于處理舊版瀏覽器的兼容性問題。雖然現(xiàn)代瀏覽器大多已經(jīng)支持標(biāo)準(zhǔn)的 background-size 屬性，但在代碼中加入這些前綴可以確保在老舊瀏覽器中也能正常顯示背景圖片。
          - end -
          色大氣全屏背景通用登錄頁面html模板是一款適用于PC端和手機(jī)端的登錄界面模板、APP登錄界面模板。現(xiàn)在就業(yè)非常重要的一個(gè)項(xiàng)目你準(zhǔn)備好了嗎？下午小編教你從無到有的敲代碼敲出自己博客最重要的項(xiàng)目 高薪就業(yè)輕松2倍。
          項(xiàng)目源代碼：
          <!DOCTYPE html>
<html lang="en">
<head>
<title>藍(lán)色登錄界面HTML代碼</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<!--圖標(biāo)樣式-->
<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="請(qǐng)輸入用戶名">
 <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="請(qǐng)輸入密碼">
 <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="#">
 立即注冊(cè)
 <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>

          代碼運(yùn)行效果截圖
          大家需要這個(gè)項(xiàng)目css代碼，js，圖片做練習(xí)的可以找我免費(fèi)領(lǐng)取，如果大家不怕麻煩可以關(guān)注我后私信我“前端學(xué)習(xí)資料”幾個(gè)字 找我領(lǐng)取 24小時(shí)在線！
          CSS中，背景樣式主要包括背景顏色和背景圖像。在傳統(tǒng)的布局中，只能使用少數(shù)的標(biāo)簽來定義背景圖像和背景顏色。但是隨著Web2.0時(shí)代的到來，設(shè)置背景樣式不再使用傳統(tǒng)HTML屬性來定義，轉(zhuǎn)而使用無限制、更靈活的CSS來定義。
          目標(biāo)
          • 設(shè)置背景顏色
          • 設(shè)置背景圖片
          • 操作背景圖片樣式

          背景顏色-background-color
          在CSS中，使用background-color屬性來定義元素的背景顏色。

          語法：background-color:顏色值;

          說明：顏色值是一個(gè)關(guān)鍵字或一個(gè)16進(jìn)制的RGB值。

          HTML標(biāo)簽

          背景顏色設(shè)置

          效果

          背景圖像--background-image
          在CSS中，使用background-image屬性來定義元素的背景圖片。
          語法：background-image:url("圖像地址");
          說明：圖像地址可以是相對(duì)地址，也可以是絕對(duì)地址。
          注意：給某個(gè)元素設(shè)置背景圖像，元素要有一定的寬度和高度，背景圖片才會(huì)顯示出來。如果設(shè)置的元素的寬高過小，背景圖片就無法完整地顯示出來了。

          設(shè)置背景圖片

          效果

          背景重復(fù)樣式--background-repeat
          在CSS中，使用background-repeat屬性可以設(shè)置背景圖像是否平鋪，并且可以設(shè)置如何平鋪。
          語法：background-repeat:取值;
          取值

          當(dāng)值是repeat，全屏覆蓋
          全屏覆蓋

          當(dāng)值是repeat-x，x軸方向覆蓋
          x軸方向覆蓋

          當(dāng)值是repeat-y，y軸方向覆蓋
          y軸方向覆蓋

          當(dāng)值是no-repeat，不復(fù)制
          不復(fù)制

          背景圖片位置--background-position
          在CSS中，使用background-position設(shè)置背景圖像的位置
          語法：background-positon:像素值/關(guān)鍵字;
          說明：語法中的取值包括兩種，一種是采用像素值，另一種是關(guān)鍵字描述。

          1. 像素值
          要設(shè)置水平方向數(shù)值（x軸）和垂直方向數(shù)值（y軸），參數(shù)如下
          取值

          假設(shè)設(shè)置一個(gè)距離左上角水平方向100px，垂直方向100px
          背景圖片位置設(shè)置

          效果如下
          效果

          2. 關(guān)鍵字
          當(dāng)background-position取值為關(guān)鍵字時(shí)，也需要設(shè)置水平方向和垂直方向的值，只不過值不是使用px為單位的數(shù)值，而是使用關(guān)鍵字代替。
          取值

          假設(shè)我們要設(shè)置一個(gè)水平方向、垂直方向都居中的位置，就可以這樣設(shè)置
          背景圖片位置設(shè)置

          這樣他就永遠(yuǎn)都處于屏幕的正中間
          效果

          背景固定樣式--background-attachment
          在CSS中，使用背景附件屬性background-attachment可以設(shè)置背景圖像是隨對(duì)象滾動(dòng)還是固定不動(dòng)
          語法：background-attachment:scroll/fixed;
          說明：background-attachment 屬性只有2個(gè)屬性值。scroll表示背景圖像隨對(duì)象滾動(dòng)而滾動(dòng)，是默認(rèn)選項(xiàng)；fixed表示背景圖像固定在頁面不動(dòng)，只有其他的內(nèi)容隨滾動(dòng)條滾動(dòng)。
          背景固定設(shè)置

          效果

          總結(jié)
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
精品免费国产一区二区三区
|
精品性影院一区二区三区内射|
一区二区三区四区在线播放|
无码人妻精品一区二区三|
亚洲日韩中文字幕一区|
日韩综合无码一区二区|
日韩精品中文字幕视频一区|
AA区一区二区三无码精片|
无码精品一区二区三区免费视频|
一区二区三区四区在线视频|
国产手机精品一区二区|
一区二区在线视频|
久久久久成人精品一区二区|
亚洲色无码专区一区|
日韩免费一区二区三区在线
|
91精品一区二区|
久久国产精品视频一区|
久久99精品免费一区二区|
一区在线观看视频|
一区二区三区四区电影视频在线观看
|
亚洲第一区精品日韩在线播放|
成人精品视频一区二区三区尤物|
亚洲色无码专区一区|
女同一区二区在线观看|
国产成人av一区二区三区在线观看|
亚洲综合无码一区二区痴汉
|
无码人妻一区二区三区在线|
日韩视频一区二区三区|
亚洲一区二区电影|
无码人妻精品一区二区三区99性|
亚洲一区二区三区91|
久久人妻无码一区二区|
无码人妻aⅴ一区二区三区|
日本一区二区在线免费观看|
精品国产一区二区三区在线观看|
色婷婷AV一区二区三区浪潮
|
精品国产AV无码一区二区三区|
精品综合一区二区三区|
国产亚洲自拍一区|
3d动漫精品成人一区二区三|
在线免费视频一区|