html背景特效代码(html特效代码大全)
HTML中怎么插入图片作为背景？
visual studio简称为vs。下面，我们来看看HTML中怎么插入图片作为背景图片吧。
打开vs
打开visual studio软件，并新建一个文件夹为img，把图片粘贴到文件夹中，如下图所示：
body style=" background:url(img/img01.jpg)"
设置背景图片的代码为 style=" background:url(img/img01.jpg)"，如下图所示：
在浏览器中查看
右击【HTMLPage.htm】，选择【在浏览器中查看】，如下图所示：
预览效果
在浏览器中的预览效果如下图所示：
html背景图片设置
一、首先HTML布局：
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
title背景图设置/title
/head
body
div class="box"/div
/body
/html
二、添加CSS样式：
!DOCTYPE?html
html?lang="en"
head
meta?charset="UTF-8"
title背景图设置/title
style?type="text/css"
.box?{
width:?700px;
height:?350px;
margin:?0?auto;
background:?url(pic.jpg)?no-repeat?center;
}
/style
/head
body
div?class="box"/div
/body
/html
三、html+css最终在浏览器显示的效果：
html特效
1、你的那段放在body/body之间
2、要把文章内容放在p id="ccon"/div中间，并接在你那段后面；
2、再就是将这段代码放到head/head之间
script language="javascript"
//保存背景颜色和字号
function setSz()
{
var va = document.getElementById("bjColor").value;
setCookie("bjColor", va, 30);
va = document.getElementById("wzSize").value;
setCookie("wzSize", va, 30);
va = document.getElementById("wzColor").value;
setCookie("wzColor", va, 30);
va = document.getElementById("gd").value;
setCookie("gd", va, 30);
alert("保存成功!");
return ;
}
//设置背景颜色和字号
function getSz()
{
var bjColor = getCookie('bjColor');
var wzSize = getCookie('wzSize');
var wzColor = getCookie('wzColor');
var gd = getCookie('gd');
if(bjColor != null)
{
document.getElementById("ccon").style.background=bjColor;
setSelect(bjColor,"bjColor");
}
if(wzSize != null)
{
document.getElementById("ccon").style.fontSize=wzSize;
setSelect(wzSize,"wzSize");
}
if(wzColor != null)
{
document.getElementById("ccon").style.color=wzColor;
setSelect(wzColor,"wzColor");
}
if(gd != null)
{
SetScrollValue(gd);
setSelect(gd,"gd");
}
}
/*
* 设置滚动速度
*/
var currentpos,timer;
var scrollValue = 100;
function SetScrollValue(value)
{
scrollValue = value * 20;
}
function initialize()
{
timer = window.setInterval("scrollwindow()",scrollValue);
}
function sc()
{
clearInterval(timer);
}
function scrollwindow()
{
currentpos = document.documentElement.scrollTop;
window.scroll(0,++currentpos);
window.status = currentpos;
if (currentpos != document.documentElement.scrollTop) sc();
}
document.ondblclick = function()
{
initialize();
}
document.onmousedown = function()
{
sc();
}
/script