整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
望收藏了我寫的文章的你同時可以關(guān)注一下“小海前端”，因為這些文章都是連載的，并且是經(jīng)過我系統(tǒng)的歸納過的。
【技術(shù)等級】初級
【承接文章】《在CSS中使用background屬性，調(diào)整頁面和塊背景，系統(tǒng)講解背景屬性》
本文承接上一篇文章中所講到的background屬性，通過幾個簡單實用的小例子，學(xué)些背景效果的各種實現(xiàn)方式。本文屬于前端開發(fā)的初級教程，適合于剛剛開始接觸CSS技術(shù)的學(xué)習(xí)者。
所承接的上一篇文章中，主要介紹了下列背景屬性：
background-color
background-image
background-repeat
background-position
background-attachment
本文在上一篇文章的基礎(chǔ)上，復(fù)習(xí)和鞏固這五個屬性的具體用法。
首先制作一張水印效果的圖片。該圖片的內(nèi)容透明度較低，圖片較小。本例中制作了一個寬度為290像素，高度為205像素的圖片。該圖片的文件名為back01.jpg。圖片內(nèi)容為兩行文本，顏色為黑色，同時調(diào)整了兩行文本的不透明度。圖片效果如下所示，大家也可以根據(jù)自己喜好利用Photoshop隨意制作。
例1素材圖片 back01.jpg
為頁面添加如下代碼在<head></head>標(biāo)記對中：
<style type="text/css">
body{background-image:url("back01.jpg");}
</style>
由于圖片本身的尺寸遠(yuǎn)遠(yuǎn)小于整個頁面的大小，所以在默認(rèn)情況下，該圖片會在頁面中平鋪以產(chǎn)生下列背景效果。
例1最終效果圖
首先制作一張花邊圖片。該圖片包含一個花邊圖樣，圖片較小。本例中制作了一個寬度為172像素，高度為36像素的圖片。該圖片的文件名為back02.jpg。圖片效果為：
例2 素材圖 back02.jpg
為頁面添加如下代碼在<head></head>標(biāo)記對中：
<style type="text/css">
body{
background-image:url("back02.jpg");
background-repeat:repeat-x;
}
</style>
由于圖片本身的尺寸遠(yuǎn)遠(yuǎn)小于整個頁面的大小，同時又設(shè)置為水平方向平鋪，所以該圖片會在頁面中產(chǎn)生下列背景效果。
例2最終效果圖
首先制作一張漸變圖片。該圖片包含自上而下的藍(lán)白漸變。本例中制作了一個寬度為1像素，高度為200像素的圖片。該圖片的文件名為back03.jpg。圖片效果為：
例3 素材圖片 back03.jpg
為頁面添加如下代碼在<head></head>標(biāo)記對中：
<style type="text/css">
body{
background-image:url("back03.jpg");
background-repeat:repeat-x;
}
</style>
由于圖片的寬度遠(yuǎn)遠(yuǎn)小于整個頁面的寬度，同時又設(shè)置了水平方向平鋪，所以該圖片該圖片會在頁面中產(chǎn)生下列背景效果。
同時，由于頁面本身的顏色默認(rèn)為白色，因此，該漸變色下方的白色與頁面背景顏色融合。因此，當(dāng)頁面過長產(chǎn)生垂直滾動條后，不會影響背景顏色的自然過渡。
那么，若需要給頁面背景添加自上而下的白藍(lán)漸變，應(yīng)該如何設(shè)置呢？漸變色下方的藍(lán)色與頁面背景無法融合，會產(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>
首先制作一張可以居中放置的圖片。本例中制作了一個寬度為500像素，高度為500像素的圖片。該圖片的文件名為back04.jpg。圖片效果為：
例4 素材圖片 back04.jpg
實現(xiàn)該效果的代碼如下所示。
<style type="text/css">
body{
background-image:url("back04.jpg"); //加載圖片
background-repeat:no-repeat; //設(shè)置不平鋪
background-position:center center; //位置在頁面中心
background-attachment:fixed; //頁面滾動時圖片固定
}
</style>
下一篇文章中，小海老師會帶領(lǐng)大家學(xué)習(xí)CSS中功能強大的圖片精靈技術(shù)（CSS Sprite）。對于渴望在前端開發(fā)道路上前進(jìn)的你一定不能錯過！
如果大家希望得到更加全面的關(guān)于HTML和CSS技術(shù)講解的內(nèi)容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發(fā)給你，幫助你在前端開發(fā)的道路上闊步前行。
在頭條上發(fā)表的這些文章都是從前端開發(fā)的基礎(chǔ)開始一步一步講起的。我非常希望能有更多的前端開發(fā)初學(xué)者通過我寫的文章，逐步學(xué)到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學(xué)過程中的經(jīng)驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設(shè)計版面，讓版面更加豐富，激發(fā)閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。
希望收藏了我寫的文章的你同時可以關(guān)注一下“小海前端”，因為這些文章都是連載的，并且是經(jīng)過我系統(tǒng)的歸納過的。
關(guān)注“小海前端”，我會繼續(xù)為大家奉上更加深入的前端開發(fā)文章，也希望更多的初學(xué)者跟著學(xué)下去，我們共同將前端開發(fā)的路努力堅持的走下去。
色顯示百度首頁
今天早上醒來一看各大網(wǎng)站，為表示新冠肺炎疫情死難者的哀悼，各大網(wǎng)站均將頁面變?yōu)榛疑@示，顯示的極為莊重肅穆。本文主要介紹常用網(wǎng)頁頁面快速變灰色的方法。
對于網(wǎng)頁而言，頁面色彩、布局等主要受到層疊樣式文件CSS控制，網(wǎng)站頁面整體色彩的改變可以通過CSS進(jìn)行整體的控制。在CSS中可以通過filter濾鏡屬性實現(xiàn)對網(wǎng)頁元素進(jìn)行圖像、背景及素材的渲染。
Filter調(diào)整測試Demo
如上圖所示，通過設(shè)置Filter的屬性取值，實現(xiàn)對顏色色彩的控制。主要屬性說明如下：
1、filter: blur()方法
該方法主要用于實現(xiàn)對圖像設(shè)置高斯模塊，及屏幕上的像素融合程度即模糊程度。其參數(shù)需要以像素值形式進(jìn)行提供。參數(shù)值越大模糊程度越高。示例如下圖：
網(wǎng)頁中顯示的圖標(biāo)
在未使用filter屬性未設(shè)置時，顯示的原始圖片效果如上圖所示。我們可以進(jìn)一步對頁面添加style樣式調(diào)整filter blur參數(shù)值，可實現(xiàn)頁面的模糊程度。如blur參數(shù)取值為2個像素，效果如下：
blur參數(shù)取值為2顯示效果
2、filter: grayscale()方法
該方法是用于實現(xiàn)頁面變灰的主要方法，主要用于設(shè)置頁面顯示的灰度。參數(shù)值需要以百分比形式進(jìn)行提供，0%表示未進(jìn)行灰度調(diào)整，100%表示將頁面完全轉(zhuǎn)化為灰度。我們還是以圖標(biāo)為例，對其進(jìn)行灰度設(shè)置進(jìn)行說明。當(dāng)灰度取值設(shè)置為20%時效果如下圖1所示，當(dāng)灰度值設(shè)置為100%時效果如圖2所示：
圖一：灰度20%設(shè)置顯示效果
圖二：灰度100%設(shè)置圖片顯示效果
使用filter提供的 grayscale()方法對頁面進(jìn)行灰度設(shè)置實現(xiàn)效果描述如上圖，我們可以快速實現(xiàn)將頁面快速變灰。目前瀏覽器的內(nèi)核型號較多，對CSS的支持與解析情況不相同，在進(jìn)行頁面灰度處理時需要考慮到用戶終端瀏覽器的類型，需要進(jìn)行CSS樣式的兼容性設(shè)置。實現(xiàn)基本代碼描述如下：
-webkit-filter: grayscale(100%);
//(Apple Safari內(nèi)核)
-moz-filter: grayscale(100%);
//(Firefox瀏覽器)
-ms-filter: grayscale(100%);
//(Internet Explorer（IE）瀏覽器)
-o-filter: grayscale(100%);
//(Opera瀏覽器)在明確網(wǎng)頁變灰所需使用濾鏡效果之后，我們可以使用其屬性進(jìn)行頁面變灰效果。以下給出本人編寫的一個簡單Demo進(jìn)行變灰測試，原始頁面效果如下：
測試原始頁面
按照編碼要求，我們在該頁面頭部<head>編寫樣式文件，實現(xiàn)變灰處理，所添加代碼描述如下：
變灰實現(xiàn)代碼
在頁面添加變灰代碼之后，我們可以看出明顯的變灰效果，效果描述如下：
頁面變灰實現(xiàn)效果
本文給出了網(wǎng)頁頁面變灰的實現(xiàn)簡單方法，作為網(wǎng)頁設(shè)計人員、前端開發(fā)人員應(yīng)當(dāng)能夠掌握基本使用方法，實現(xiàn)頁面的快速改變。
現(xiàn)在大家在瀏覽器網(wǎng)站的時候，會發(fā)現(xiàn)越來越多的網(wǎng)站出現(xiàn)了這么一個效果，就是鼠標(biāo)選中頁面中文字的時候，被選中的文字體現(xiàn)出來的不是傳統(tǒng)的藍(lán)底白字還是其他顏色，如拉勾網(wǎng)中文字被選中的效果：
說實話，這個效果實際的用處并不是太大，有沒有均不會對網(wǎng)站的用戶體驗造成太大影響，但如果合理利用，將被選中文字的樣式（如背景顏色等）設(shè)置成和網(wǎng)站主色調(diào)相似的顏色，會顯得頁面更舒服一些。好吧，廢話不多說，怎么實現(xiàn)呢？很簡單，利用css3中提供的::selection偽類選擇器即可。
演示代碼如下：
<style>
h1::selection{
background: greyellowgreenen;
color: white;
}
h1::-moz-selection{
background: yellowgreen;
color: white;
}
</style>
<h1>后盾網(wǎng) 人人做后盾(效果分享：孫琪崢)</h1>
實際效果演示請猛戳這里：效果傳送門
注意：經(jīng)實際測試，ie、谷歌、斯巴達(dá)等瀏覽器就能直接識別，火狐瀏覽器需要加-moz-的專屬前綴。
【本文來自 孫琪崢博客 http://www.sunqizheng.com/，想獲取更好的頁面瀏覽效果或者有任何問題請進(jìn)入博客，同時也可在博主評論區(qū)進(jìn)行留言，讓博主為大家答疑解惑~】
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
