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如何切换图片背景相关的资料