html如何切換圖片背景_如何在html中設置背景圖片

❶ html中，點擊div，使其更換背景圖片，兩張圖片來回切換

稍等上代碼！

你好我寫的例子是用jquery來寫的，引用的網上的地址，你可以直接用。

<!DOCTYPEhtml>
<html>
<head>
<metacharset='utf-8'/>
<title>JSBin</title>
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style>
.box1{
width:698px;
height:258px;
border:1pxsolid#ccc;
background:url(http://www.snowinmay.net/6rooms/html/img/gsh/gsh_banner3.jpg)no-repeat;
}
.changeBg{
background:url(http://www.snowinmay.net/6rooms/html/img/gsh/gsh_banner1.jpg)no-repeat;
}
</style>
</head>
<body>
<divclass="box1">

</div>
<script>
$(function(){
$('.box1').toggle(function(){
$(this).addClass('changeBg');
},function(){
$(this).removeClass('changeBg');
});

})
</script>
</body>
</html>

希望能幫你，有問題可以追問！

❷ 如何在html中設置背景圖片

1、設置背景圖片只需在css樣式中設置backgroud-image屬性：

body{

background-image:url(你的圖片地址);

background-position:center;

background-repeat:repeat-y；

}

</style>

2、其中， background-image:url(你的圖片地址)表示背景圖片的存放路徑；

background-position:表示的是背景圖片的位置，主要有top(上)、bottom（下）、left(左)、right(右)這四個取值；

background-repeat:表示的圖片的平鋪方式。默認情況是平鋪，一般設置為no-repeat,表示的是不平鋪。

❸ html中如何滑鼠點擊更換背景圖片

html中滑鼠點擊更換背景圖片的方法：

1、html代碼：

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

2、css代碼：

ul.menu > li > a{

float:left;

width:265px;

height:50px;

margin-top:450px;

text-align:center;

line-height:50px;

color:#ddd;

background-color:#333;

letter-spacing:1px;

cursor:pointer;

text-decoration:none;

text-shadow:0px 0px 1px #fff;

}

ul.menu > li ul{

list-style:none;

float:left;

margin-top:-180px;

width:100%;

height:110px;

padding-top:20px;

background-repeat:no-repeat;

background-color:transparent;

}

ul.menu > li ul li{

display:none;

}

ul.menu > li ul.sub1 {

background-image: url('../img/bg1sub.png');

}

ul.menu > li ul.sub2 {

background-image: url('../img/bg2sub.png');

}

ul.menu > li ul.sub3{

background-image:url(../img/bg3sub.png);

}

ul.menu > li ul li a{

color:#fff;

text-decoration:none;

line-height:30px;

margin-left:20px;

text-shadow:1px 1px 1px #444;

font-size:11px;

}

ul.menu > li ul li a:hover{

border-bottom:1px dotted #fff;

}

ul.menu > li ul.sub1 li{

display:block;

}

3、js代碼：

if (!document.defaultView || !document.defaultView.getComputedStyle) { // IE6-IE8

var oldCurCSS = jQuery.curCSS;

jQuery.curCSS = function (elem, name, force) {

if (name === 'background-position') {

name = 'backgroundPosition';

}

if (name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[name]) {

return oldCurCSS.apply(this, arguments);

}

var style = elem.style;

if (!force && style && style[name]) {

return style[name];

}

return oldCurCSS(elem, 'backgroundPositionX', force) + ' ' + oldCurCSS(elem, 'backgroundPositionY', force);

};

}

var oldAnim = $.fn.animate;

$.fn.animate = function (prop) {

if ('background-position' in prop) {

prop.backgroundPosition = prop['background-position'];

delete prop['background-position'];

}

if ('backgroundPosition' in prop) {

prop.backgroundPosition = '(' + prop.backgroundPosition;

}

return oldAnim.apply(this, arguments);

};

function toArray(strg) {

strg = strg.replace(/left|top/g, '0px');

strg = strg.replace(/right|bottom/g, '100%');

strg = strg.replace(/([0-9.]+)(s|)|$)/g, "$1px$2");

var res = strg.match(/(-?[0-9.]+)(px|\%|em|pt)s(-?[0-9.]+)(px|\%|em|pt)/);

return [parseFloat(res[1], 10), res[2], parseFloat(res[3], 10), res[4]];

}

4、實現效果

❹ html怎麼用按鈕更換背景圖片代碼

回答： <input name="color"檔散 type="button" onClick="chColor()" style="background-image:url(nantouxiang1.jpg)">岩蠢配追問：不好用啊。我就是想把網頁原來的背粗指景圖變成黑色背景以後。按一個按鈕再把他變回原來的圖片回答：你再寫一個樣式代碼，對這個按鈕進行控制，對onmonseclick樣式進行控制寫一下你想要的樣式就行了

❺ html怎麼設置背景圖片

html設置背景圖片的方法有：一種是用html的img標簽進行插入，另一種是利用銀衡css的background標簽插入。

HTML稱為超文本標記語言，是一種標識性的語言。它包括一系列標簽，通過這些標簽可以將網路上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。

超文本是一種組織信息的方式，它通過超級鏈接方法將文本中的文字、圖表野搏輪與其他信息媒體相關聯。這些相互關聯的信息媒體可能在同一文本中，也可能是其他文件，或是地理位置相距遙遠的某台計算機上的文件。這種組織信息方式將分布在不同位置的信息資源用頌信隨機方式進行連接，為人們查找，檢索信息提供方便。

❻ html中怎樣定時變換背景圖片

一般是用腳本實現。

示例：
<祥模!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style type="text/css">
#bg_body{
background:url(1.jpg) no-repeat center #eee;
background-attachment:fixed;
height:1000px;
}
</style>
<script type="此碼text/森宴哪javascript">
window.onload=function(){
var oBody=document.getElementById('bg_body');
var oS=oBody.style;
function BgChenge(){
oS.backgroundImage='url(2.jpg)';
};
function BgPosition(){
oS.backgroundRepeat='no-repeat';
oS.backgroundPosition='center';
oS.backgroundAttachment='fixed';
};
function LoadMethod(){
BgChenge();
BgPosition()
};
setInterval(LoadMethod,1000);
};
</script>
</head>

<body id="bg_body">

</body>
</html>

你背景圖片就設置了一個2.jpg再切換也是這一張圖片啊
如果有多張圖片比如說1-10.jpg，那就把oS.backgroundImage='url(2.jpg)';改為oS.backgroundImage='url('+(parseInt(Math.random() * 10) + 1)+'.jpg)';

❼ html如何改變背景圖片

如果你想向網頁中添加圖片，用HTML就可以了。但是如果你想將一張圖片設置為網頁背景圖片，就同時需要HTML和CSS。HTML的全名叫做「超文本標記語言」，是一種用來指示瀏覽器在網頁中顯示什麼內容的代碼。CSS的全名叫做「層疊樣式表」，用來改變網頁外觀和布局。你還需要一張用於web頁面的背景圖片。

部分 :
新建文檔

1
創建一個文件夾用來存放HTML文件和背景圖片。在電腦上創建並命名一個文件夾，方便日後查找。
你可以為文件夾隨意命名，但是使用HTML時，最好養成習慣，使用簡短的單個單詞來命名文件和文件夾。

2
將背景圖片放入HTML文件夾。將你想要用作背景的圖片放入HTML文件夾。
如果你不在意網頁是否能在網速較慢的舊設備上運行順暢，可以使用高解析度圖片來作為背景。選擇帶有重復圖樣的簡單圖片作為背景也不錯，因為你可以在這種背景下閱讀任何文本。
如果你沒有圖片，可以下載免費的背景圖。下載好圖片，將它放入創建好的HTML文件夾中。

3
創建一個HTML文件。打開文本編輯器，然後新建一個文件。將文件另存為index.html。
你可以使用任何你想要的文本編輯器，系統自帶的文本編輯器也可以，如Windows的記事本，以及Mac OS X的文本編輯器。
如果你想要使用能處理HTML的文本編輯器，點擊這里下載Windows、Mac OS X、Linux操作系統都可以使用的文本編輯器Atom。
如果你使用的是Mac電腦的文本編輯器，在開始編寫HTML文件之前，單擊「格式」菜單，然後單擊「生成純文本」。該設置會確保HTML文件在網頁瀏覽器中正常載入。
諸如Microsoft Word之類的文字處理程序並不適合編寫HTML，因為它們添加了一些不可見的字元和格式，這些字元和格式可能會破壞HTML文件，讓它無法在網頁瀏覽器中正確顯示。

部分 2 的 5:
編寫HTML文件

復制並粘貼標准HTML代碼。選擇並復制下面的HTML代碼，然後粘貼到打開的 index.html文件中。

❽ html5網頁背景圖手動上傳切換代碼怎麼寫

html5網頁背景圖手動上傳切換代碼這樣寫。
1、html5網頁背景圖手動棗含上傳切換代碼需要在網頁上點擊滑鼠右鍵查看網站源代碼。
2、找到css裡面的背景圖這一段代碼，查看背絕伏景凳宏笑圖路徑，通過ftp或者伺服器進行替換圖片即可。

❾ html中動態切換背景圖片的問題

這中情況有很多，第一種可能是的腳本函數有問題，你首先在函數的第一行alert一下，看是否觸發了這函數，如果出發，那麼就可能是第二種問題，那麼就是你函數在執行過程中存在問題，那麼在每一行的後面都alert看一是錯在那茄芹一行。如果這還沒有問題那麼就可能是你的所給的id元素更不不存顫慧畢在或者你在拼接url的時候拼錯了，目前只能看出這么多，你代碼有限。碧畢如何還有問題可以密我

❿ html怎樣實現圖片自動切換

1、首先，打開html編輯器，新建html文件，例如：index.html。

導航:首頁 > 圖片大全 > html如何切換圖片背景

html如何切換圖片背景

與html如何切換圖片背景相關的資料