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美女精品app,久久精品国产亚洲精品 

      

        

          



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

          


          
	

          

 

          
  
          
    
          
      
          
        
          純CSS教你實(shí)現(xiàn)磨砂玻璃背景效果（附代碼）
          
        
           
          
	
	
          
		
                        
          砂玻璃效果已經(jīng)在互聯(lián)網(wǎng)上流行了很多年，Mac OS以其磨砂玻璃效果而聞名，Windows 10也通過其他一些燈光，深度，運(yùn)動(dòng)，材質(zhì)，比例尺實(shí)現(xiàn)了磨砂玻璃的效果
          在CSS中使用磨砂玻璃效果時(shí)，我們中的一些人知道該怎么做，而其他人仍會(huì)在百度搜索：
          怎么做？？
          “ css光澤效果”
          “ css毛玻璃”
          “透明模糊背景css”
          “毛玻璃效果photoshop”
          “僅cs模糊背景”
          “ css玻璃窗格”
          “ css背景濾鏡”
          “ css模糊覆蓋物”
          “ css div后面的模糊背景”
          今天，我將展示僅CSS的一種方法，教你可以使用該方法在CSS中進(jìn)行磨砂玻璃效果。
          1，創(chuàng)建一個(gè)HTML標(biāo)記
          為簡單起見，我將向你展示如何在空的div上制作磨砂玻璃效果。因此，HTML中所需的只是一個(gè)空的div。
          <div> </div>
          2.重置瀏覽器默認(rèn)樣式
          *{
 margin: 0;
 padding: 0;
}
          3.添加背景圖片
          我們需要我們的背景占據(jù)頁面的整個(gè)寬度和高度，并且我們不想重復(fù)我們的背景，我們也希望我們的背景是固定的。我們希望背景是固定的，因?yàn)槲覀儾幌Ｍ院笤诶^承背景時(shí)將整個(gè)背景顯示在div中。
          body{
 background-image: url(http://bit.ly/2gPLxZ4); //add "" if you want
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-size: cover;
}
          4.現(xiàn)在給Div一些樣式
          現(xiàn)在，我們將使用背景繼承為div設(shè)置一些寬度和高度。我們還需要確定絕對(duì)位置，以確保疊加層不會(huì)占用網(wǎng)頁的整個(gè)寬度和高度
          div{
 background: inherit;
 width: 250px;
 height: 350px;
 position: absolute;
}
          5，固定和不固定附件的示例
          現(xiàn)在，我們知道在固定了背景附件的情況下，我們只能看到div后面的div內(nèi)部的背景圖像區(qū)域，而這正是我們希望毛玻璃效果起作用的地方
          6，現(xiàn)在我們需要?jiǎng)?chuàng)建一個(gè)覆蓋層
          我們需要content: “”確保之前的偽類能夠正常工作。我們還從其父級(jí)繼承了背景，并且我們使用絕對(duì)位置將其在其父元素DIV中對(duì)齊。我們正在使用盒子陰影添加白色透明疊加層，并且正在使用模糊來模糊該疊加層。
          div:before{
 content: “ ”;
 background: inherit; 
 position: absolute;
 left: 0;
 right: 0;
 top: 0; 
 bottom: 0;
 box-shadow: inset 0 0 0 3000px rgba(255,255,255,0.3);
 filter: blur(10px);
}
          7，修復(fù)DIV的不模糊邊緣
          現(xiàn)在，我們需要修復(fù)div的未模糊邊緣，為此，我們需要增加疊加層的尺寸，使其比其父尺寸稍高一些，然后將其上下位置設(shè)為負(fù)（-25）。我們還需要給它的父對(duì)象提供隱藏的溢出，以確保父DIV之外的任何覆蓋都不會(huì)顯示并被隱藏。
          div{
 background: inherit;
 width: 250px;
 height: 350px;
 position: absolute;
 overflow: hidden;  //adding overflow hidden
}
div:before{
 content: ‘’;
 width: 300px;
 height: 400px;
 background: inherit; 
 position: absolute;
 left: -25px;  //giving minus -25px left position
 right: 0;
 top: -25px;   //giving minus -25px top position 
 bottom: 0;
 box-shadow: inset 0 0 0 200px rgba(255,255,255,0.3);
 filter: blur(10px);
}
          到這里，我們就實(shí)現(xiàn)了CSS的磨砂玻璃效果
          你還可以使用CSS屬性“backdrop-filter: blur(20px)”來實(shí)現(xiàn)此效果，該屬性在工作方面要容易得多，并且是更好的選擇，但兼容性還不是很強(qiáng)。
          ackground可以幫助前端er們豐富元素的背景，讓網(wǎng)頁更加絢爛，是一個(gè)使用頻率很高的屬性。首先，我們會(huì)先介紹background-color、background-image、background-repeat、background-attachment、background-position基礎(chǔ)屬性。
          1 background-color : 為元素設(shè)置背景顏色，會(huì)填充元素的內(nèi)容、內(nèi)邊距、邊框。如果邊框有透明部分，會(huì)透過這些透明部分顯示出背景色
          值：
           color_name 如：red
 hex_number 如：#f00
 rgb_number 如：rgb(0,0,0)
 transparent 默認(rèn)，透明
 inherit 繼承父元素

          添加以下截圖右側(cè)代碼可看出來“如果邊框有透明部分，會(huì)透過這些透明部分顯示出背景色”

          2 background-image ：為元素設(shè)置背景圖片（默認(rèn)以內(nèi)邊距為起點(diǎn)）
          值：
           url 圖片路徑 none 不顯示背景圖片
 inherit 父元素繼承

          添加以下截圖右側(cè)代碼可看出來“默認(rèn)以內(nèi)邊距為起點(diǎn)”

          3 background-repeat：是否及如何重復(fù)背景圖片（位置根據(jù)background-position設(shè)置）
          值：
           repeat 默認(rèn)。背景圖像將在垂直方向和水平方向重復(fù)
 repeat-x 背景圖像將在水平方向重復(fù)
 repeat-y 背景圖像將在垂直方向重復(fù)
 no-repeat 背景圖像不重復(fù) inherit 繼承父元素

          若給元素添加透明的border，可看出來“圖片的重復(fù)會(huì)在border上起作用”

          4 background-attachment 設(shè)置背景圖片是否固定或者跟隨頁面滾動(dòng)（這里一般用于body或者h(yuǎn)tml上）
          值：
           scroll 跟隨頁面滾動(dòng)
 fixed 固定 inherit 繼承父元素

          5 background-position ：設(shè)置背景圖片的起始位置
          值：
           top/left/center/right/bottom
 x% y% （相對(duì)于父元素的位置）
 xpos ypos

          若給元素添加background-position：100% 100%，可以看到背景圖片已經(jīng)被定為在元素的右下角。

          tips:background-position一般最多運(yùn)用在雪碧圖當(dāng)中來移動(dòng)背景圖片的位置。
          如果我們將該圖片看成是一張雪碧圖，想只展示從嘴巴往右及往下的部分則可以利用background-position將圖片往左移動(dòng)，將嘴巴部分移動(dòng)到原點(diǎn)展示

          像以上所有的屬性，其實(shí)可以加些成以下形式：background:color image repeat fixed postion
          在css3，背景相關(guān)的屬性在原有的基礎(chǔ)上，新增了background-size、background-origin 、background-clip 。下面一一講解一下~
          6 background-size ：規(guī)定背景圖像的尺寸
          值：
           length 第一個(gè)值是寬度，第二值是高度；如果只設(shè)置一個(gè)值，第二個(gè)值默認(rèn)是auto
 percentage 以父元素的百分比來設(shè)置寬度和高度；如果只設(shè)置一個(gè)值，第二個(gè)值默認(rèn)是auto
 cover 把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域 contain 把圖像圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。

          6.1 將元素的background-size設(shè)置成cover，圖片（100*133）長>寬，會(huì)把圖片的最小邊去擴(kuò)大至適應(yīng)到元素對(duì)應(yīng)的邊，將整個(gè)圖片平鋪在元素上，盡量讓元素內(nèi)填充圖片。
          tips:可以看出來背景是相對(duì)于padding-box為起始位置繪制，不過，右側(cè)和下側(cè)的透明border還會(huì)被繪制

          6.2 將元素的background-size設(shè)置成contain，圖片（100*133）長>寬，會(huì)把圖片的最長邊去擴(kuò)大至適應(yīng)到元素對(duì)應(yīng)的邊，將圖片全部展示在元素上。

          6.3 不設(shè)置background-size，圖片（225*300）長>寬，會(huì)按照?qǐng)D片原始尺寸展示在元素內(nèi)。

          6.4 不設(shè)置background-size，圖片原尺寸為：225*300，會(huì)按照設(shè)置的size展示在元素上。
          tips:1.這里用的比較多的是在移動(dòng)端的背景圖片，我們的設(shè)計(jì)師一般設(shè)計(jì)的移動(dòng)端設(shè)計(jì)稿為三倍圖。我們?cè)谶\(yùn)用到頁面上時(shí)，一般會(huì)在原來的尺寸基礎(chǔ)上縮小三倍。 2.這里建議x方向設(shè)置為具體值，y方向設(shè)置為auto。一方面，y向的尺寸會(huì)自動(dòng)計(jì)算自適應(yīng)；二方面，以后雪碧圖有修改，可以直接在y方向上增加，不用再修改代碼。不至于因?yàn)樾薷牧藞D片沒有修改代碼帶來bug。



          7 background-origin 規(guī)定了background-position屬性相對(duì)于什么位置來定位
          值：
           padding-box 相對(duì)于內(nèi)邊距來定位(默認(rèn)) border-box 相對(duì)于邊框盒來定位 
 content-box 相對(duì)于內(nèi)容框來定位

          給元素添加background-origin:content-box 可以看出來，背景圖片是相對(duì)于內(nèi)容框開始繪制

          不同屬性設(shè)置對(duì)比
          望收藏了我寫的文章的你同時(shí)可以關(guān)注一下“小海前端”，因?yàn)檫@些文章都是連載的，并且是經(jīng)過我系統(tǒng)的歸納過的。
          【技術(shù)等級(jí)】初級(jí)
          【承接文章】《在CSS中使用background屬性，調(diào)整頁面和塊背景，系統(tǒng)講解背景屬性》
          本文承接上一篇文章中所講到的background屬性，通過幾個(gè)簡單實(shí)用的小例子，學(xué)些背景效果的各種實(shí)現(xiàn)方式。本文屬于前端開發(fā)的初級(jí)教程，適合于剛剛開始接觸CSS技術(shù)的學(xué)習(xí)者。
          所承接的上一篇文章中，主要介紹了下列背景屬性：
          • background-color
          • background-image
          • background-repeat
          • background-position
          • background-attachment
          本文在上一篇文章的基礎(chǔ)上，復(fù)習(xí)和鞏固這五個(gè)屬性的具體用法。
          例1：為網(wǎng)頁背景制作水印效果。
          首先制作一張水印效果的圖片。該圖片的內(nèi)容透明度較低，圖片較小。本例中制作了一個(gè)寬度為290像素，高度為205像素的圖片。該圖片的文件名為back01.jpg。圖片內(nèi)容為兩行文本，顏色為黑色，同時(shí)調(diào)整了兩行文本的不透明度。圖片效果如下所示，大家也可以根據(jù)自己喜好利用Photoshop隨意制作。
          例1素材圖片 back01.jpg
          為頁面添加如下代碼在<head></head>標(biāo)記對(duì)中：
          <style type="text/css">
          body{background-image:url("back01.jpg");}
          </style>
          由于圖片本身的尺寸遠(yuǎn)遠(yuǎn)小于整個(gè)頁面的大小，所以在默認(rèn)情況下，該圖片會(huì)在頁面中平鋪以產(chǎn)生下列背景效果。
          例1最終效果圖
          例2、為網(wǎng)頁背景制作頂部花邊效果。
          首先制作一張花邊圖片。該圖片包含一個(gè)花邊圖樣，圖片較小。本例中制作了一個(gè)寬度為172像素，高度為36像素的圖片。該圖片的文件名為back02.jpg。圖片效果為：
          例2 素材圖 back02.jpg
          為頁面添加如下代碼在<head></head>標(biāo)記對(duì)中：
          <style type="text/css">
          body{
          background-image:url("back02.jpg");
          background-repeat:repeat-x;
          }
          </style>
          由于圖片本身的尺寸遠(yuǎn)遠(yuǎn)小于整個(gè)頁面的大小，同時(shí)又設(shè)置為水平方向平鋪，所以該圖片會(huì)在頁面中產(chǎn)生下列背景效果。
          例2最終效果圖
          例3、為網(wǎng)頁背景制作漸變背景。
          首先制作一張漸變圖片。該圖片包含自上而下的藍(lán)白漸變。本例中制作了一個(gè)寬度為1像素，高度為200像素的圖片。該圖片的文件名為back03.jpg。圖片效果為：
          例3 素材圖片 back03.jpg
          為頁面添加如下代碼在<head></head>標(biāo)記對(duì)中：
          <style type="text/css">
          body{
          background-image:url("back03.jpg");
          background-repeat:repeat-x;
          }
          </style>
          由于圖片的寬度遠(yuǎn)遠(yuǎn)小于整個(gè)頁面的寬度，同時(shí)又設(shè)置了水平方向平鋪，所以該圖片該圖片會(huì)在頁面中產(chǎn)生下列背景效果。
          同時(shí)，由于頁面本身的顏色默認(rèn)為白色，因此，該漸變色下方的白色與頁面背景顏色融合。因此，當(dāng)頁面過長產(chǎn)生垂直滾動(dòng)條后，不會(huì)影響背景顏色的自然過渡。
          那么，若需要給頁面背景添加自上而下的白藍(lán)漸變，應(yīng)該如何設(shè)置呢？漸變色下方的藍(lán)色與頁面背景無法融合，會(huì)產(chǎn)生明顯的藍(lán)白邊界。該問題的解決方法是將頁面的背景顏色由默認(rèn)的白色調(diào)整為漸變色下方的顏色即可。代碼如下：
          <style type="text/css">
          body{
          background-image:url("back03.jpg");
          background-repeat:repeat-x;
          background-color:# 8181fc; //漸變色下方的藍(lán)色
          }
          </style>
          例4：設(shè)置網(wǎng)頁的背景圖片位于頁面中心，且不隨垂直滾動(dòng)條的滾動(dòng)而滾動(dòng)。
          首先制作一張可以居中放置的圖片。本例中制作了一個(gè)寬度為500像素，高度為500像素的圖片。該圖片的文件名為back04.jpg。圖片效果為：
          例4 素材圖片 back04.jpg
          實(shí)現(xiàn)該效果的代碼如下所示。
          <style type="text/css">
          body{
          background-image:url("back04.jpg"); //加載圖片
          background-repeat:no-repeat; //設(shè)置不平鋪
          background-position:center center; //位置在頁面中心
          background-attachment:fixed; //頁面滾動(dòng)時(shí)圖片固定
          }
          </style>
          文章預(yù)告
          下一篇文章中，小海老師會(huì)帶領(lǐng)大家學(xué)習(xí)CSS中功能強(qiáng)大的圖片精靈技術(shù)（CSS Sprite）。對(duì)于渴望在前端開發(fā)道路上前進(jìn)的你一定不能錯(cuò)過！
          小海教材
          如果大家希望得到更加全面的關(guān)于HTML和CSS技術(shù)講解的內(nèi)容，可以私信我，我會(huì)免費(fèi)將小海老師自己編寫的HTML和CSS的PDF教材發(fā)給你，幫助你在前端開發(fā)的道路上闊步前行。
          小海聲明
          在頭條上發(fā)表的這些文章都是從前端開發(fā)的基礎(chǔ)開始一步一步講起的。我非常希望能有更多的前端開發(fā)初學(xué)者通過我寫的文章，逐步學(xué)到一定的知識(shí)，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學(xué)過程中的經(jīng)驗(yàn)，每寫一篇時(shí)我都盡量把握好措辭，用簡單易懂的語言描述，同時(shí)精心設(shè)計(jì)版面，讓版面更加豐富，激發(fā)閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費(fèi)小海老師很久的時(shí)間。
          希望收藏了我寫的文章的你同時(shí)可以關(guān)注一下“小海前端”，因?yàn)檫@些文章都是連載的，并且是經(jīng)過我系統(tǒng)的歸納過的。
          關(guān)注“小海前端”，我會(huì)繼續(xù)為大家奉上更加深入的前端開發(fā)文章，也希望更多的初學(xué)者跟著學(xué)下去，我們共同將前端開發(fā)的路努力堅(jiān)持的走下去。
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
日韩精品电影一区|
一区二区三区在线播放|
人妻无码一区二区视频|
日韩精品一区二区三区中文|
亚洲国产欧美国产综合一区|
乱中年女人伦av一区二区|
中文激情在线一区二区|
国产免费一区二区三区不卡|
狠狠做深爱婷婷久久综合一区|
日韩精品无码一区二区三区不卡
|
韩国理伦片一区二区三区在线播放|
国产91精品一区二区麻豆亚洲
|
亚洲一区二区三区免费在线观看|
亚洲免费视频一区二区三区
|
亚洲A∨无码一区二区三区|
午夜肉伦伦影院久久精品免费看国产一区二区三区
|
一区二区三区免费精品视频|
日韩一本之道一区中文字幕|
一区二区三区在线免费|
国产精品av一区二区三区不卡蜜
|
无码人妻一区二区三区av|
亚洲日本一区二区|
国精产品一区二区三区糖心|
一区二区三区视频免费|
国产成人精品无码一区二区老年人|
精品欧洲av无码一区二区三区|
久久久久无码国产精品一区|
国产内射999视频一区|
久久久国产一区二区三区|
亚洲AV成人精品日韩一区18p|
国产嫖妓一区二区三区无码|
在线一区二区观看|
国产成人无码精品一区不卡|
国产微拍精品一区二区|
中文字幕av一区|
春暖花开亚洲性无区一区二区|
在线免费视频一区二区|
国产精品va一区二区三区|
国产精品无码一区二区三区免费|
精品国产日韩亚洲一区在线
|
国产精品污WWW一区二区三区|