構建顏色漸變的網頁背景(HTML JS)

2021-08-07 19:33:07 字數 1973 閱讀 8861

之前做乙個介面時,想到用顏色漸變的做背景,剛好在html的書中,看到了可以使用標籤來實現。在這裡就直接上**了。

lang="en">

charset="utf-8">

name="generator"

content="editplus®">

name="author"

content="">

name="keywords"

content="">

name="description"

content="">

documenttitle>

type="text/css">

* html,body

#canvas1

style>

head>

id="canvas1">

canvas>

var canvas=document.getelementbyid('canvas1');

var context=canvas.getcontext('2d');

var gradient=context.createlineargradient(0,0,0,canvas.height);

gradient.addcolorstop(0,'#0080ff');

gradient.addcolorstop(1,'white');

context.fillstyle = gradient;

context.fillrect(0,0,canvas.width,canvas.height);

script>

body>

html>

coding、coding、、、、,就照著書上的步驟把**寫好了。效果如下:

效果看起來讓我還是覺得可以的,但是,等我再想往其中新增一些別的標籤元素,比如,發現沒有任何內容在畫布上顯示。一查之下,才明白標籤不支援任何內容標籤插入,如果想讓div在canvas上面顯示,需要將div放在canvas的同級,然後將div的position設定成absolute或fixed。之後覺得這樣設定,元素的布局特別麻煩。於是又想到,可以使用todataurl()方法返回乙個包含展示的 data uri ,然後用瀏覽器開啟該檔案,再把儲存,用於做背景。只要在上面的指令碼**中新增下面兩行**即可。

var fullquality=canvas.todataurl("image/jpeg", 1.0);

console.log(fullquality);

在這裡todataurl()的第二個引數用於設定是儲存的的質量,範圍從0至1.0,1.0就是最高的質量。

然而,老定律,想法總是那麼好,現實終歸是太骨感。當把擴放至整個瀏覽器的螢幕時,1.0的高質量還是不夠高。

後來,當我和我同學討論這個煩人的問題時,他給了我乙個很好的解決辦法–使用css來實現漸變效果。這樣前面的問題就都可以很好的解決了。還是直接上**吧!

lang="en">

charset="utf-8">

name="generator"

content="editplus®">

name="author"

content="">

name="keywords"

content="">

name="description"

content="">

documenttitle>

type="text/css">

* html,body

#div

style>

head>

id="div">

div>

body>

html>

這是一波三折啊!

CSS實現網頁背景顏色漸變的效果。

來自 為了顯示乙個漸變而專門製作乙個的做法是不靈活的,而且很快會成為一種不好的做法。但是遺憾的是,截至寫這篇文章,可能還必須這樣做,但是希望不會持續太久。多虧firefox 和safari chrome,我們現在可以使用最少的努力實現強大的漸變。在本文中,我們將展示css漸變的簡單實現以及該屬性在m...

Google Chrome修改網頁背景顏色的辦法

1 在chrome web store 裡搜多stylist外掛程式並安裝 2工具 擴充套件程式找到stylist 點選項進行設定 如下圖所示 點styles 再點demo 選擇all site 再把這段 貼上在下面就行了 其中 c7edcc為你要設定的顏色 你可以設定任意顏色 這個顏色是看別人這樣...

網頁背景色漸變效果

背景色漸變 引數說明 gradienttype為漸變型別,0為上下漸變,1為左右漸變 startcolorstr為開始顏色 endcolorstr為結束顏色 背景色透明 背景圖漸變 01 白色 ffffff 18 紅色 ff0000 35 綠色 00ff00 02 牡丹紅 ff00ff 19 青色 ...