當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

网页的背景图片代码

發布時間：2023/12/18 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了网页的背景图片代码小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

網頁背景圖片代碼

1.(最普遍類)

說明:以上代碼為網頁背景圖片固定代碼！網頁背景圖片固定代碼，這樣，當向下拉網頁時，網頁背景圖片不會跟著向上移動，達到不動的目的！

2.(綜合類)

3.<P class=style6> </P></SPAN><SPAN>
<TABLE width="100%">
<TBODY>
<TR>
<TD class=ArticleTitle align=left>
<DIV id=divTitle style="FONT-SIZE: 30px"><B></B> </DIV></TD></TR>
<TR>
<TD class=ArticleContent style="FONT-SIZE: 30px; LINE-HEIGHT: 150%" align=left>
<CENTER> </CENTER>
<STYLE type=text/css><!--body {background-image:url( 圖片地址);

background-repeat:no-repeat;

background-attachment:fixed;background-position:50% 50%}</STYLE>
</TD></TR></TBODY></TABLE></SPAN>

說明：

no-repeat;（不平鋪）

改為這個repeat（平鋪）

你要以看一下兩邊

方法一：
文章編輯的時候點擊創建表格后在彈出的窗體中把邊框設置為0,然后填上背景圖片的鏈接地址就好了也能夠用代碼：
<TABLE height=600 width=600 background=你的背景圖片地址 border=0>
<TBODY>
<TR>
<TD>你的主體內容</TD></TR></TBODY></TABLE> 方法二：
<body background=你的背景圖片地址 > 方法三：
<STYLE type=text/css> </STYLE> 方法四：背景圖是在HTML模式下把下面代碼加到已有代碼最前面：
<body background="圖片地址">
注：圖片地址必須是網絡上已有的圖片，不是本地機的，假設要鏈接本地機的，必先在相冊或者其它文章上傳之后才干夠調用。

方法五：
<STYLE TYPE="text/css">

</STYLE>

◆字體屬性：<font color=00dfff　face="幼圓" size=4.5>顯示文字</font>

◆背景,正文,連接顏色：<body bgcolor="#000000" text="#ff9933" link="#ff66ff">

◆ 給字體加光暈<table style="FILTER: glow(color=顏色)">文字</table>當中的glow客換成shadow,dropshadow等，產生的效果各不同樣

◆顏色代碼網址http://shirley329.blogchina.com/3501281.html

◆背景圖案：<body background="http://圖片地址" bgproperties="fixed">假設去掉后面的bgproperties="fixed"那么選折的背景會跟頁面一起翻,這里給點兒建議,一般上下銜接的非常巧妙的或者用碎花,星星之類的作成滾動的比較好,而那種完整的圖片最好就固定下?當然自己最好都試一下,看哪個合適另外注意背景一定要選用顏色較淺的圖畫,要分得清主次,3樓有編輯的小工具,調一下GAMA值就能得到淺色的圖片，還有個圖片放大器，能夠通過插值不失真的放大圖片

◆背景音樂：<BGSOUND src="http://音樂地址" loop=infinite> 假設不加 loop=infinite 那么背景音樂僅僅播一邊就結束了；假設想給自己的音樂加個精美的播放器，能夠看這里，還能實現不同歌曲的連續播放里面有９種樣式播放器

◆頁面貼圖：<img width=XXpx src="http://圖片地址"> 即在涂鴉版里顯示的圖片,width事寬度還能夠是height，也能夠同一時候定義，注意數字與單位間不要有空格，也能用百分比表示，如以下

◆浮動的圖片<div style="position:absolute;Top:0px;left:250px;"><img width=160% src="圖片地址"></div> 這一條比上一個靈活非常多通過改動參數能夠將圖片定位在頁面的不論什么位置，資源網址兩邊的引號是可有可無的單引也能夠

◆貼圖透明化：<IMG style="FILTER: alpha(opacity=100 Style=3 FinishOpacity=0)black();" src=貼圖的網址 width=400 height=300> Style能夠是1.2.3代表不同的效果、自己試試吧 opacity是透明度0~100 假設是0全然透明

◆超鏈接： <a href=http://www.地址.com target="_blank">被連接的文字</a> 被連接的文字能夠更改屬性，也能夠換成喜歡的圖片方法就是換成頁面貼圖target="_blank"指在新窗體打開,也能夠刪掉校內對&有限制，一般假設鏈接中有&就取它前面的地址，當然最好能先試一下

◆滾動的超鏈接： <marquee scrollAmount=2 width=300><a href=http://www.地址.com>被連接的文字</a></marquee>

◆改鼠標樣式: <body style="cursor:url(’http://鼠標地址’)"> 4樓有270種鼠標

◆以下用CSS控制鼠標：<style type=text/css> </style>

１是正常狀態下，２是鼠標放在鏈接上時的效果

◆讓頁面以幻燈片切換效果顯示： <head><meta HTTP-EQUIV="Page-Enter" CONTENT="revealtrans(duration=6.0, transition=23)"> <meta HTTP-EQUIV="Page-Exit" CONTENT="revealtrans(duration=6.0, transition=23)"></head> 這里enter和exit分別指在訪問或離開時背景圖片出現和消失的方式 duration是時間，transition是方式共24種，0 盒狀收縮 1 盒狀放射 2 圓形收縮 3 圓形放射 4 由下往上 5 由上往下 6 從左至右 7 從右至左 8 垂直百葉窗 9 水平百葉窗 10 水平格狀百葉窗 11垂直格狀百葉窗 12 任意溶解 13從左右兩端向中間展開 14從中間向左右兩端展開 15從上下兩端向中間展開 16從中間向上下兩端展開 17 從右上角向左下角展開 18 從右下角向左上角展開 19 從左上角向右下角展開 20 從左下角向右上角展開 21 水平線狀展開 22 垂直線狀展開 23 隨機產生一種過渡方式

◆滾動文字：<marquee scrollAmount=2 width=300 height=160 direction=up>滾動的文字</marquee>

a)scrollAmount。它表示速度，值越大速度越快。假設沒有它，默覺得6

b)width和height，表示滾動區域的大小，width是寬度，height是高度。特別是在做垂直滾動的時候，一定要設height的值

c)direction。表示滾動的方向，默覺得從右向左：←←←。可選的值有right、down、up。滾動方向分別為：right表示→→ up表示↑，down表示↓。

d)scrollDelay，這也是用來控制速度的，默覺得90，值越大，速度越慢。通常scrollDelay是不須要設置的。

e)behavior。用它來控制屬性，默覺得循環滾動，可選的值有alternate(交替滾動)、slide(幻燈片效果，指的是滾動一次，然后停止滾動)

f)怎樣給滾動字幕加超鏈接？這跟平時的超鏈接是全然一樣的。僅僅要在文字外面加上<a href=***>和</a>就能夠了
g)改變滾動字幕的屬性

顏色：<a style=color:CC6600>滾動的文字</a>
字體：<font color=00dfff　face="幼圓"　size=4.5>顯示文字</font>
注意：滾動的內容還能夠換成其它的東西，自己慢慢試吧

◆設置成滾動:<marquee direction=up marquee scrollamount=3 >當向上滾動height=0時，就隱藏了　

◆FLASH動畫：<embed style="left: 0px; position: absolute; top: 50px; " align=right src=http://flash地址 width=1000 height=500 type=application/octet-stream ; quality="high" wmode="transparent">

希望各位能徹底搞懂這個，美麗的頁面都少不了flash比方我的頁面里的小時鐘，發光的星星都是用它實現的，非常多貼子里提供特效只是是改動了里面的引用地址　left top是用來定位的當然也能夠用right bottom width height來限制flash的大小align=right 表示右對齊

◆FLASH動畫(相對定位即放在涂鴉板里)：<embed style="left: 150px; position: relativity; top: 800px; " align=right src=http://flash地址 width=400 height=200 type=application/octet-stream ; quality="high" wmode="transparent">

◆假設要加時鐘的話就用<embed style="left: 150px; position: absolute; top: 50px; " align=right src=http://時鐘地址 width=1000 height=500 type=application/octet-stream ; quality="high" wmode="transparent">

width: hetght: 確定時鐘大小，left: top: 來確定鐘表在頁面的任何位置，上面的代碼是我頁面時鐘的位置

◆視頻： <embed SRC=你的wmv的地址 type=audio/x-pn-realaudio-plugin CONSOLE=Clip1 CONTROLS=ImageWindow HEIGHT=252 WIDTH=324 AUTOSTART=true loop=true>

◆播放FLASH：<embed src=http://播放地址 quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="640" height="480"></embed>

◆ 更改頁面文字樣式（具體圖解見5樓）
<style type=text/css> </style>

A:link是鏈接的部分
A:visited是已經鏈接過的鏈接部分
A:active是被激活的鏈接部分
A:hover是鼠標放上去時的顯示
body是正文部分的更改。
FONT-SIZE 是字號大小的設置
FONT-FAMILY: 字體名稱
FONT-WEIGHT: bolder 是加粗顯示，能夠替換的是normal,cite,等等默認的是normal使用這個能夠讓連接產生button形式動畫效果

-----------------------------------------------------------------------------------------

加一些有用技巧

◆技巧1：非常多朋友都加了背景音樂，假設打開的頁面多了就混在一塊了，這是僅僅要按一下ESC鍵，音樂就停止了

◆技巧2：涂鴉板里加的代碼多了，改動時就難了，加條凝視吧，格式例如以下： 

◆在貼子里加鏈接：打開記事本輸入<meta content="0; URL=’目標頁面地址’"> 保存為.html形式,然后通過附件上傳就能夠了;content后面的參數表示幾秒種自己主動跳轉,這里當然設為0了假設在兩頭加上<html> </html>就能夠把.html后綴刪掉了

◆寫給有一定網頁基礎的朋友:通過上面連接的樣例不難想到,事實上我們全然打破校內網的種種限制自己設計網頁,然后上傳,僅僅要不大于1M就OK了,1M并不小,設計時全部用到的素材都單個傳到校內上,然后作個首頁組織起來即可了,就相當校內給我們提供了無限的空間,并且速度不慢,有興趣的朋友能夠試一下

◆查看別人涂鴉板里的代碼,進入頁面右擊鼠標,選折查看原代碼按CTRL+F輸入"涂鴉板"查找就能夠定位到涂鴉板的位置了,此法僅供學習之用,一定不要原盤COPY別人的成果

◆建立自己的專署留言板，到過我頁面的朋友看到了吧，通過鏈接能夠打開專門的頁面留言，而原來的則隱藏了，制作例如以下：

1：用上面的群欄和留言班設為滾動，參數為向上，高度為零

2：建立鏈接，地址為http://www.xiaonei.com/GetLeavewordList.do?id=等號后面加上自己的頁面編號（進入自己的頁面后最后幾個數字就是）

轉載于:https://www.cnblogs.com/mfrbuaa/p/3901228.html

總結

以上是生活随笔為你收集整理的网页的背景图片代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。