當前位置:首頁 » 背景圖片 » 動態背景圖片
擴展閱讀
夏目小時候圖片高清 2024-10-22 05:01:43
安卓手機相冊圖片裂紋 2024-10-22 04:53:05
ps把圖片調節尺寸 2024-10-22 04:41:43

動態背景圖片

發布時間: 2022-01-23 19:30:04

A. 怎麼用js或者css來設置動態局部背景圖片(急,急,急!)

<style>
.bgwhite{background-color:white;border:none}
.bgchange{background-color:yellow;border:1px solid blue}
</style>

<div id="div1" onmouseOver="this.className='bgchange'" onmouseOut='this.className=''bgchange'>家居街 百誠家電 整體廚房 衛浴瓷磚 集成吊頂 地板地暖 門窗樓梯 整體傢具 油漆塗料</div>

說明:主要用onmouseOver和onmouseOut來控制這個DIV的樣式

還有不懂的可以HI我

B. 找一些動態背景

網路空間代碼模板
http://link.265.com/sites/site_22939.html
網路空間如何設定+固定空間背景
http://www.im811.com/blog/index.php?id=184
這里要用到一個新的CSS參數,就是背景透明的參數,我會在下面詳細說的
要設定一個不懂得背景,首先要找一個自己滿意的圖片,一般找一個1024*782的壁紙比較好,網路的圖片搜索理由提供壁紙搜索的,到哪裡搜索可以找到不少呢,hoho~~
找到圖片後,最好把圖片保存下來,然後上傳到網路空間的相冊里,這樣比較安全,以免搜索到的圖片鏈接過期失效,在得到圖片地址後,我們就可以正式開始開工了
其實步驟也不錯,也不難
首先在body{}中加入
background-image:url(#圖片地址) no-repeat; 定義背景圖片,no-repeat是讓背景圖片不重復
background-position: center; 定義背景居中
background-attachment: fixed; 定義背景固定,不滾動,這個就是關鍵參數fixed
好啦,背景定義好了,預覽看一下,卻發現基本看不到背景,為什麼?因為網路空間的樣式中還有別的背景,比如標題欄上的背景圖片等
所以我們要把標題欄他們的背景給去掉
在header{}中加入background:transparent 這個參數的作用是使背景透明
並把其中原來的background:url(……)……;等設置都刪除掉
接著到#header div.rc{}以及.stage{}中做同樣的設置,即可達效果了,再看看,是不是能夠看到設定的背景了
嘿嘿~~
如果覺得其他模塊的背景也很礙眼的話,只要照著上面的方法設置了即可了,不過有的是設置背景色的,那麼只要把background-color:……;刪掉然後再+上background:transparent就可以了

C. HTML怎麼用動態圖片做背景

你好,方式有很多哦,隨便列舉3種方式:

  1. 使用本身就是動態變化的(gif)作背景。但是gif圖不僅要求圖片長寬大,而且清晰度也要高。

  2. 使用幾張圖片,用javascript每隔一段時間刷新背景圖片的url地址為每一張圖片。

  3. 使用HTML5 動畫技術。

D. ppt的背景圖片如何設置動態圖片

1.想要製作精美的PPT動態背景的話,你首先需要有一定的素材,包括一張圖片作為PPT背景,例如下面我用一個藍天大海為靜態的背景圖片做出一個動態效果,PPT如何設置背景圖片:右擊幻燈片→填充→圖片或紋理填充→插入自「文件」→選擇圖片插入:
2.我製作的動態背景是要讓藍天大海的背景有船劃過還有海鳥飛過,讓PPT這張背景圖片活起來,插入海鳥跟船隻的圖片,這里提醒最好插入的圖片為背景透明的圖片,讓與原PPT背景素材融合得更好哦,點擊「插入」的「圖片」插入ppt背景素材:
3.現在來設置如何讓我們的PPT背景動起來呢?先設置PPT原本的背景圖片有動畫效果,這里作為一張PPT背景圖片,需要對PPT設置「切換效果」,點擊菜單項「切換」的「切換方案」,選擇一個「切換方案」裡面的「切換方案」,例如「蜂巢」:
4.之前的切換效果只是讓PPT背景圖片出來,現在我們繼續設置其他PPT背景素材的動態出現,例如,設置兩個帆船從遠到近劃過來,點擊帆船的圖片,然後點擊菜單項「動畫」(幻燈片自定義動畫)→「添加動畫」→「進入」的「縮放效果」,設置帆船動畫的開始時間為「與上一動畫同時」,持續時間為5秒,然後預覽下效果,是否效果從遠到近出現呢?
5.緊接著來設置海鳥飛過海面的動畫,點擊海鳥的圖片,同樣點擊「添加動畫」→「動作路徑」→「弧形」,這個時候「海鳥」的圖片就有了一個弧形的動畫路徑:
6.完善海鳥飛的動畫:點擊海鳥圖片弧形的動作路徑紅色剪頭的一頭,把弧形拉長到跨越整個PPT幻燈片,然後設置動畫的「計時」的開始為「與上一動畫同時」,持續時間同樣為5秒:

7.現在海鳥跟帆船的動畫都設置好了,你可以預覽下效果啦,點擊「動畫」的「預覽」按鈕,因為我們設置了海鳥跟帆船的動畫開始時間均為「與上一動畫同時」,所以它們的ppt動畫效果一起播放:

E. 怎麼添加動態背景圖片

恩,今天luna給我留言說FLASH水珠是怎麼做的,那好吧,我就把FLASH水珠還有北京奧運倒計時還有最近更新的BLOG代碼以及製作的方法告訴大家吧:
1.水珠代碼:
<DIV><EMBED
style="LEFT:
0px;
POSITION:
absolute;
TOP:
10px"
align=right
src=http://imgfree.21cn.com/free/flash/27.swf
width=600
height=400
type=application/x-shockwave-flash
wmode="transparent"
quality="high"
;></EMBED></DIV>
注意:在上面的src=到width=600中間是FLASH水珠的地址,我已經寫在上面了,點擊滑鼠的左鍵復制的時候就可以看到了.
參數說明:
代碼中left:
為從左向右移的位置,top:
為從上向下移的位置;width="800"和height="600"分別為flash的寬和高,這些參數用來指定FLASH的位置和范圍大小!其數據可根據自己的需要而隨意更改!
製作方法以及具體的步驟:
進入「控制面板」——首頁內容維護——自定義空白面板——新增——勾選「顯示源代碼」(這個是關鍵)——在編輯區粘貼以上代碼(字體必須為默認字體樣式,顏色為黑色,不要擅自添加任何字體特效)----點保存-------定製我的首頁------添加模塊-------勾選你設定的名稱-----
選取-------保存設置就可以了

F. 關於網頁圖片,如果在背景圖片中插入動態圖片

通過表格或者是Div來定位就行了
光從你圖片上顯示的區域來看
需要插入一個兩行五列的表格
<table>
<tr>
<td colspan="5" height="用ps或者是其他的圖片處理軟體測下高度"></td>
</tr>
<tr>
<td width="用ps或者是其他的圖片處理軟體測下高度(距離黑圖片的最左邊距離)"></td>
<td width="黑衣服的寬度"><img src='需要方式的圖片路徑'></td>
<td width="兩衣服之間的寬度"></td>
<td width="黃衣服的寬度"><img src='需要方式的圖片路徑'></td>
<td></td>
</tr>
</table>

G. JS的動態背景圖片

$(function(){
varnum=0,y=0;
functiontime(){
num+=80;
if(num>400){
num=0;
}
$("#fav-icon").css("background-position",num+'px'+y+"px");
};

$(".fav").hover(function(){
inte= setInterval(time,500);
},function(){
clearInterval(inte);
$("#fav-icon").css("background-position",0+'px'+0+"px");
});
});

H. 怎麼製作動態背景或圖片

你可以使用Ulead GIF Animator 5
以下是產品介紹和使用方法

Ulead GIF Animator 是一個簡單、快速、靈活,功能強大的GIF 動畫編輯軟體,讓你的主頁動起來。同時,也是一款不錯的網頁設計輔助工具,還可以作為Photoshop 的插件使用,豐富而強大的內制動畫選項,讓我們更方便地製作符合要求的GIF 動畫。它是Ulead (友立)公司最早在1992 年發布的一個動畫GIF 製作的工具,直到2001 年4 月3 號,Ulead 公司又推出了Ulead GIF Animator 5.0 的最新版本。

Ulead GIF Animator 5.0 作為Ulead GIF Animator 家族的最新成員,功能上的更加強大是顯而易見的。使用它作出GIF 動畫再也不僅僅是傳統觀念上的256 色了,而是允許我們在真彩色環境下,製作出色彩斑斕的動畫;功能更強的工具和更為靈活的工作環境,也使我們的動畫製作愈顯輕松。

基礎教程

創建醒目動畫的三個快速步驟

GIF 動畫與其它動畫形式沒有本質的區別。它是將兩個或多個圖片按一定的方式排列,從而產生運動效果。這中醒目的動畫可以吸引注意力,將您的客戶或訪問者帶到您想要他們去的地方。您可以用 GIF Animator,通過三個步驟來實現這個目的:

· 步驟 1:創建/選擇圖像(也叫,層面)
· 步驟 2:插入圖像
· 步驟 3:優化您的動畫在您完成下列教程後,您看到的結果是:

步驟 1:創建/選擇圖像:

如果您有藝術天賦,那麼請隨意創建您的圖像。如果您沒有藝術天賦,那麼可以用我在下面提供的幾個青蛙圖:

您首先要將這些圖像保存到一個您便於找到的文件夾中。如果您按查看的次序保存它們,可以使您在 GIF Animator 中的操作更方便。另外,按它們的次序來為它們命名也是有益的。(例如,frog1.gif、frog2.gif,等等)。在本例中,您可以從右邊的一個青蛙開始。將它保存到文件夾中的方法:

· 右擊圖像。
· 選取「圖片另存為」
· 創建一個文件夾或將它放入一個已有的文件夾內。
· 為它命名 (frog1)
· 在「文件類型」框中,應該顯示 GIF (*.gif)。如果未顯示,請單擊下拉箭頭,選取 GIF。
· 單擊「確定」。對所有 5 個圖像重復該步驟。

步驟 2:插入圖像:

按圖像在動畫中出現的次序進行選取。在本例中,我們就按此次序 (如 Frog1、Frog2,等等)。您可以通過三個方法實現該操作:

· 單擊「層面 / 插入圖像」
· 單擊標准工具欄上的「插入圖像按鈕」。
· 按 Insert 鍵在您插入了所有的圖像之後,您可以在「層面窗格」中單獨查看每個圖像。用屏幕左邊的方框。「層面窗格」上方有三個選項卡。單擊這些選項卡,可以以不同的方式查看層面(請記住,這是圖像的另一個名稱)。如果您想在文檔框中查看特定的層面,在「層面窗格」中單擊它,它就可以顯示出來了。(您還可以用「編輯模式」,來改變您的層面,但我們先不談這些內容。)您的圖像層面將按您希望的次序排列。現在,對您的動畫進行優化吧...

步驟 3:優化您的動畫:

「優化」選項可以讓您簡單地將動畫保存成更小的文件,而不損失圖像質量。現在請試著保存您的動畫。程序將問您是繼續還是中止,請按「中止」。GIF Animator 讓您了解您所創建的文件可以被優化。要實現該操作:

· 單擊文檔區上方的「優化」選項卡。
· 單擊「立刻優化」按鈕。保存動畫,完成。您想看一下結果嗎?請按文檔區上方的「預覽」選項卡。它看上去象此圖嗎?