⑴ web中将图片设为背景图片的代码是什么
web中将图片设为背景图片的代码如下：
<html>
<body background="a.jpg">
</body>
</html>
这样就把图片a.jpg设为背景图片了。
<body bgcolor="#CCCCCC">
这个是把背景设成灰色
⑵ web中将图片设为背景图片的代码是什么。谢谢大家了！！
呃，如果是在HTML里面就用BGGROUD就可以了，如果是用ASP.NET就用BACKGROUD-IMAGE ，例如：
*{margin:0px; padding:0px;}
body{ color:#687f96; font-size:14px;}
body img{ border:0px;}
.clear{ clear:both;}
ul{list-style-type: none;}
a{ color:#687f96; text-decoration:none;}
.zhong { width:1000px; margin:0 auto; padding :100;}
.top{ height:73px;background:url(../images/bg_1.gif) repeat-x;padding:0 24px;}
.top_left{ float:left; margin-top:14px;}
.top_right{ float:right; margin-top:10px; text-align:right;}
.top_right_1{padding-right:30px;}
.top_right_1,.top_right_1 a{ color:#0473a9;}
⑶ flash加载图片如何实现过渡效果
我来回答：这个很简单，我告诉你正解
这里面用到的技术：ajax，div层的概念，javascript的第三方特效库
div层的概念：类似于一个容器，能够容纳图片等。用代码来解释就是：“<div>这里存放图片</div>”
略缩图和大图：图像可以用代码来控制显示的大小，所以你能够看到小图和大图
当你点击略缩图示，你最先看到一块白色区域，中间的地方有个加载等待图案，这里面用到了ajax技术，同时用到了div层的概念（稍候解释）。当ajax接收到了图片加载完毕的信息后，会告知浏览器，可以显示图片了。
第二步，图片显示在白色区域中。
为什么有些时候白色区域会变小？
因为这里又用到了第三方的js函数库，他的作用的过渡效果，即div层的移动。所以你会看到白色区域慢慢的向图片边缘靠拢。
问什么你点击不到其他地方？
用技术的角度来解释，就是在你第一次点击小图的时候，他已经自动创建的一个透明的div层在上面，所以你点不到他
这就类似于你在桌子上放一幅画，而在画的上面放上玻璃板，当你用笔去往上写东西的时候，当然不会写到画上面。
我说，大哥，你明白了吗？我解释的不容易啊，给分吧
********************************************
我是搞web开发的，如果用我们的专业术语来给你解释，你能明白吗？你有什么依据来证实你说的是对的？代码的编译原理，程序执行的先后顺序，我能够用我的经验判断出来。如果你想真正弄清楚这是怎么一回事，我希望你看看javascript和html基本语法知识（特别是div的用法，设置他的style的z-index属性和filter属性，然后就是js的基本语法和dom规范），然后再来提问。这样效果会好一些，前提是你愿意在这上面花费一些时间
*********************************************
页面确实有flash控件，但只有一个地方用到了，而图片显示的时候没有用到。共两个文件如下(webroot代表应用根目录)
名称：flash_ad_relay.swf
目录：webroot/comic/flasher/ads_data/
名称：imgad.swf
目录：webroot/comic/flasher/ads_data/
说明：通过观察ads.htm（目录在webroot/comic/flasher/）文件代码，能够判断，flash_ad_relay.swf应该是google提供的一个flash控件，其作用是控制广告程序的加载进度。而imgad.swf则是一个广告（ad）程序，当当网的那个，在页面最下面。
总体来说flash_ad_relay.swf用来控制imgad.swf文件加载的进度并且显示。
入口方法：tianchaoyu.html文件中<script type="text/javascript" src="
http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
此行代码用来加载flash广告程序，这应该是遵循了google的命名规范和目录结构。
上面这个是我个人推测的，但只有这一个地方用到flash文件，图片显示完全没有用到。
**********************************************
lightbox.css文件
目录：
http://www.songzg1.com/comic/flasher/css/lightbox.css
说明：#outerImageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
上面为lightbox.css代码片断，width: 250px;height: 250px;控制了图片第一次点击的时候初始化大小为250像素*250像素 在17寸1024*768分辨率上。加载的过程中用到了loading.gif图片（
http://www.songzg1.com/comic/flasher/images/loading.gif），你可能是因为这个原因把它理解成flash吧。这只是一张gif图而已。
当点击图片，图片数据传输完毕之后，能够获得图片的宽高属性，根据这些属性，那个div层（<div><img /></div>）会自动扩大或缩小，以适应新的图片。这就是你看到的过渡效果。
处理放大缩小过渡效果的文件是lightbox.js，而effects.js也有一些坐标变化的处理。
lightbox.js是一个简单实用的用来把图片覆盖在当前页面上的脚本. 它能被快速安装并且运作于所有流行的浏览器.。这个网站上用的是2.02版本，它是由Lokesh Dhakar人于20060331日创建的，可以通过
http://www.huddletogether.com察看相关信息。
最后介绍使用方法，非常easy
**********************************************
先说一下其他两个js框架
prototype.js
它是一个非常优雅的javascript基础类库，对javascript做了大量的扩展，而且很好的支持Ajax，国外有多个基于此类库实现的效果库，也做得很棒。
像前面提到的lightbox.js和后面要说的effects.js是基于prototype.js实现的，他们通常结合使用。
scriptaculous.js和effects.js
这是个动画效果库。
scriptaculous 包含以下几个部分：
builder.js ：提供了一种方便的建立html元素的方法
controls.js ：包含自动提示和动态编辑两个控件
dragdrop.js ： 提供元素拖放的功能
effects.js ： 设计优良的ajax效果库，这篇文章要讲的就是这个
slider.js ： 一个滑动条控件
effects.js中提供了两种类型的动画效果，一种称为核心效果（core effect），一种称为组合效果（combination effect）
**********************************************
结合使用
第一步
Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果库. 你将需要外调这三个 Javascript 文件在你的 header.
代码：
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
第二步
外调 Lightbox CSS 文件 (或添加 Lightbox 样式到你现行的样式表中).
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
第三步
检查 CSS 并确定调用的 prev.gif 和 next.gif 文件在正确的位置. 同样要确定调用的 loading.gif 和 close.gif 文件及 lightbox.js 文件在正确的位置.
方式一：添加 rel="lightbox" 属性到任何一个链接标签去激活lightbox. 例如:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
方式二：如果你有一套你想分组的相关图片, 接着上一部并且又在 rel 属性中添加一个带方括号的组名. 例如:
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
********************************************
********************************************
基本上就是这么用，我都写的快吐血了
要是还有不明白的，提出来，需要详细代码的话，我可以给你做一个demo
lightbox下载地址：
http://www.blueidea.com/articleimg/2006/08/3904/lightbox2.02.zip
prototype.js下载地址（你只需要下在lightbox就可以了，里面包含着个文件了）：
http://www.prototypejs.org/ 26906希望对你有用！
⑷ JavaScript代码实现图片循环滚动效果
1.概述
循环滚动图片，不仅可以增添Web页面的动态效果，而且可以节省页面空间，有效地保证在有限的页面中显示更多的图片。
2.技术要点
主要应用setTimeout()方法实现图片的循环滚动效果。setTimeout()方法的语法格式如下：
setTimeout（function,milliseconds,[arguments]）
参数说明：
a.
function：要调用的JavaScript自定义函数名称。
b.
Milliseconds：设置超时时间（以毫秒为单位）。
功能：经过超时时间后，调用函数。此值可以用clearTimeout()函数清除。
3.具体实现
（1）在页面的合适位置添加一个id属性为demo的<div>标记，并在该标记中添加表格及要要滚动显示的图片。关键代码如下：
<div
id="demo"
style="
overflow:
hidden;
width:
455px;
height:
166px;">
<table
border="0"
cellspacing="0"
cellpadding="0">
<tr>
<td
valign="top"
id="marquePic1">
<!--
要循环滚动的图片
-->
<table
width="455"
border="0"
align="center"
cellpadding="0"
cellspacing="0"
>
<tr
align="center">
<%for(int
i=1;i<8;i++){%>
<td>
<img
src="Images/<%=i%>.jpg"
width="118"
height="166"
border="1">
</td>
<%}%>
</tr>
</table>
</td>
<td
id="marquePic2"
width="1"></td>
</tr>
</table>
</div>
（2）编写自定义的JavaScript函数move()，用于实现无间断的图片循环滚动效果。speed数值越大图片滚动的越快，具体代码如下：
<script
language="javascript">
var
speed=30
;
//设置间隔时间
marquePic2.innerHTML=marquePic1.innerHTML;
var
demo=document.getElementById("demo");
//获取demo对象
function
Marquee(n){
//实现图片循环滚动的方法
if(marquePic1.offsetWidth-demo.scrollLeft<=0){
demo.scrollLeft=0;
}
else{
demo.scrollLeft=demo.scrollLeft+n;
}
}
var
MyMar=setInterval("Marquee(5)",speed);
demo.onmouseover=function()
{
//停止滚动
clearInterval(MyMar);
}
demo.onmouseout=function()
{
//继续滚动
MyMar=setInterval("Marquee(5)",speed);
}
</script>
以上所述是小编给大家介绍的JavaScript代码实现图片循环滚动效果的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
⑸ web前端中，怎么给背景图片做出轮播效果啊求详细代码
直接用轮播插件把http://www.jq22.com/jquery-info1940
⑹ html5怎么设置网页过渡效果
步骤1 创建空白的HTML 5模版
首先，我们创建一个空白的模版，代码很简单，如下所示：
复制代码
步骤2 增加HTML 5新标签 HTML 5中新增加了不少标签，如：
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
在页面模版中，我们需要确保每个区域都能正确地对齐，因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer这些标签。代码如下所示：
复制代码
读者可能留意到这里使用的div id=”wrapper”，这个是稍候用来做meida query的时候调整全局CSS样式调整用的 步骤3 往HTML 5标签中增加代码
1）首先往标题中增加如下代码：
Simple HTML5 Template
复制代码
2）往导航标签中添加如下代码，这样很方便地构件了一个简单的页面分类导航：
Home About Parent Page Child
One Child Two with child Child One Child
Two Child Three Child Three
Contact
复制代码
3）使用标签来描述每一个要展示的内容实体,比如要展示的是多篇文章列表,其中的每一篇文章的具体内容就可以使用标签了。如下代码所示：
This is a title for post
Richard KS 20th March 2013 Tutorials HTML5, CSS3
and Responsive 10 Comments Lorem
Ipsum is simply mmy text of the printing and typesetting instry.
Lorem Ipsum has been the instry's standard mmy text ever since the
1500s
复制代码
4）添加标签 HTML5提供的元素标签用来表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分。
根据目前的规范，元素有两种使用方法：
被包含在中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的引用、词汇列表等。
在之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。
代码如下：
Categories Category 1 Category 2
Parent Category Child One Child Two
Grandchild One Grandchild Two Grandchild Three
Child Three Category 3
Text Lorem Ipsum is simply mmy
text of the printing and typesetting instry.
复制代码
5）加上最后的标签，代码为：
Copyright@ 2013 HTML5.com Privacy Policy - About Us
复制代码
步骤4 增加CSS样式
首先创建一个空白的样式，如下：
[/code] 然后在http://necolas.github.com/normalize.css/中下载这个css,然后将其内容复制到该空白的文件中代码如下： [code]body {
font-family: arial, sans-serif;
font-size: 100%; /* best for all browser using em */
padding:0;
margin:0;
}
*, html { line-height: 1.6em; }
article img { width:auto; max-width:100%; height:auto; }
.sidebar a, article a, header a, footer a { color: #C30; }
header a { text-decoration: none; }
#wrapper {
font-size: 0.8em; /* 13px from 100% global font-size */
max-width: 960px; /* standard 1024px wide */
margin: 0 auto;
}
/* css for */
header { padding: 1em 0; margin: 0px; float: left; width: 100%;
}
header hgroup { width: 100%; font-weight:normal; }
/* css for */
nav
{ display: block; margin: 0 0 2em; padding: 0px;
float: left; width: 100%; background-color: #181919;
}
nav ul ul {display: none;}
nav ul li:hover > ul {display: block;}
nav
ul { padding: 0; list-style: none; position:
relative; display: inline-table; z-index: 9999;
margin: 0px; float: left; width: 100%;
}
nav ul:after {content: ""; clear: both; display: block;}
nav ul li {float: left;}
nav ul li:hover a {color: #fff;}
nav
ul li a { display: block; padding: 1em; font-size:
1.125em; color: #ccc; text-decoration: none;
margin: 0px; background-color: #000; border-right: 1px
solid #333;
}
nav ul li:last-of-type a {border-right: 1px solid transparent !important;}
nav
ul ul { background: #5f6975; border-radius: 0px;
padding: 0; position: absolute; top: 100%; width:
auto; float: none;
}
nav ul li:hover { background: #5f6975; color: #FFF;
}
nav ul ul li a:hover { background-color: #4b545f;
}
nav ul ul li {
float: none;
border-bottom: 1px solid #444240;
position: relative;
}
nav ul ul li a {
padding: 0.5em 1em;
font-size: 1em;
width:10em;
color: #fff;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
/* css for */
section.content { width: 70%; float:left; }
.content article { width:100%; float:left; padding: 0 0 1em; margin: 0 0 1em; border-bottom: 1px solid #ddd; }
article .entry { clear:both; padding: 0 0 1em; }
h1.post-title { font-size: 1.8em; margin:0; padding:0;}
.entry.post-meta { color: #888; }
.entry.post-meta span { padding: 0 1em 0 0; }
.entry.post-content { font-size: 1.125em; margin:0; padding:0;}
/* css for */
aside.sidebar { width: 25%; float:right; }
aside.sidebar ul { width:100%; margin: 0px; padding: 0px; float: left; list-style: none;
}
aside.sidebar
ul li { width:100%; margin: 0px 0px 2em; padding:
0px; float: left; list-style: none;
}
aside.sidebar ul li ul li { margin: 0px 0px 0.2em; padding: 0px;
}
aside.sidebar
ul li ul li ul li { margin: 0px; padding: 0px 0px 0px
1em; width: 90%; font-size: 0.9em;
}
aside.sidebar
ul li h3.widget-title { width:100%; margin: 0px;
padding: 0px; float: left; font-size: 1.45em;
}
/* css for */
footer { width: 98%; float:left; padding: 1%; background-color: white; margin-top: 2em;
}
footer .footer-left { width: 45%; float:left; text-align:left; }
footer .footer-right { width: 45%; float:right; text-align:right; }
复制代码
步骤5 为移动应用使用@media query查询 为了进行响应式设计，最佳的方案是使用@media query去进行查询，在上面的CSS代码中添加如下代码：
/* ipad 768px */
@media only screen and (min-width:470px) and (max-width:770px){
body { background-color: red; } #wrapper { width:96%; font-size: 0.6875em; }
section.content, aside.sidebar { width:100%; }
}
/* iphone 468px */
@media only screen and (min-width:270px) and (max-width:470px){
body { background-color: yellow; } #wrapper { width:96%; font-size: 0.6875em; }
section.content, aside.sidebar { width:100%; }
}
复制代码
步骤6 增加jquery,modernizer和html5shiv到标签中 这里推荐使用Modernizr 和html5shiv，它们都是一个能在多种浏览器中通过运行各种脚本兼容运行支持大部分HTML 5标签的插件。我们将它们和jQuery库放在标签前
⑺ css如何实现颜色的过渡效果
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
⑻ 网页背景图片设置的代码是什么呢
代码为：{background-image: url(URL)|none}
1，背景颜色 {background-color:数值}。
2，背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}。
3，背景固定 {background-attachment:fixed|scroll}。
4，背景定位 {background-position:数值|top|bottom|left|right|center}。
5，背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置}。
拓展资料
1、所谓的网页代码，就是指在网页制作过程中需要用到的一些特殊的“语言”，设计人员通过对这些“语言”进行组织编排制作出网页，然后由浏览器对代码进行“翻译”后才是我们最终看到的效果。
2、制作网页时常用的代码有HTML，JavaScript，ASP，PHP，CGI等，其中超文本标记语言（标准通用标记语言下的一个应用、外语简称：HTML）是最基础的网页代码。
⑼ WEB网页页面背景颜色渐变设置
页面上实现渐变背景有两种方法，一种是用背景图片，一种是用代码
如果渐变是自上而下的，并且渐变的顶部还想再加幅图，如果你需要让这幅图和渐变背景色的过渡平滑自然。那么，用背景图片比较适合你的要求
把渐变部分，切成宽为1像素，高为渐变全部高度。假定存为"bg.gif"
将这个bg.gif作为网页BODY区的背景图，并且设计背景图横向重复平铺。（注意的是，不要有纵向重复）