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