Web前端开发基础知识，设置网页背景图，如何在网页中插入图片

片

一、图片的表现形式

当我们在制作页面的时候，通常会遇到图片的三种表现形式，如下：

1、内容图片

内容图片是页面中真正的内容，没有内容图片，就无法完整的理解页面内容。如淘宝网上的商品展示图片，这些图片是网页的一部分，它们能帮助你决定这个页面的内容是否是你需要的。

内容图片

2、布局图片

布局图片出现在页面背景中，要想理解页面的内容，它们不是必须的。如苹果官网的这个图片，没有这个图片也能理解页面上文字描述的内容是什么意思。

布局图片

3、交互图片

图中用红色框起来的图片会给你浏览页面的时候带来一些帮助，如搜索图片，一看到就知道这里可以搜索想要的东西，购物车图片可以看到选购的产品，箭头图片点击可以看到更详细的产品等。

交互图片

二、创建内容图片

在HTML中我们用 img 标签创建图片，英文是image的缩写。

<img src="" alt="">

内容图片

img是空标签，没有结束标签
src属性的值是一个图片的URL地址，地址可以是相对路径，也可以是绝对路径
alt属性：填写对这张图片的简单描述，增加图片的可访问性
图片应该被存放在单独的文件夹中，如：images文件夹

三、创建布局图片

布局图片是在CSS中被创建出来的，使用CSS中的background属性，如：

1）background-color 定义背景颜色，设置背景图片时，要始终设置背景颜色，确保背景图片没有成功时会显示一个背景颜色

2）background-image 可以指向一个相对路径或者绝对路径来添加图片。

3）background-repeat可以设置背景是否平铺在容器中，包含四个关键字：

background-repeat：repeat 可以设置背景图片横向和纵向都平铺。
background-repeat：no-repeat 设置图片不平铺，图片默认显示在容器的左上角
background-repeat：repeat-x 设置图片只能在横向平铺
background-repeat：repeat-y 设置图片只能在纵向平铺

4）background-position 属性可以控制背景图片显示在什么位置，包含两个关键字，如：

background-position：top left 设置图片显示在容器的左上角，第一个关键字可以是top、center、bottom，第二个关键字可以是left、center、right

CSS中和背景相关的属性可以简写在一行中，如：

background: #FF1298 url(images/logo.png) center right no-repeat;

首先是图片的颜色color，image，position，repeat，CSS属性能用简写就尽量用简写，简写比分开写性能更高。

布局图片

四、创建用户交互图片

Web上最常用的三种图像格式

1）Jpeg 可以展示一张照片或者复杂图像

可以表示多达1600万种颜色，即所有的十六进制颜色
不支持图像透明
不支持动画
扩展名为.jpg或.jpeg

2）png最适合展示网页插画、logo和网页小图标

可以表示上百万种不同颜色的图像
包括png-8、png-24和png-32，取决于想表示多少种颜色
可以设置颜色透明
不支持动画
扩展名为.png

3）gif适合展示网页插画、logo和网页小图标

可以表示最多256种不同颜色
可以设置颜色透明
支持动画
扩展名是.gif

建议：

复杂颜色的图像和照片则要使用jpeg格式
动态图像要使用gif格式
png格式的透明图片要比gif格式的更平滑
这三种图像相对于其他格式的图像文件比较小，适合web页面高效展示

一般情况下用户交互图片都是一些小图标，所以使用png或gif作为用户交互图片；使用CSS的background属性以背景图片的形式为网页添加用户交互图片；推荐把用户交互图片放在同一个文件中，可以提高网络和服务器性能，如：

交互图片

具体如何操作呢？后续教头会通过视频给大家详细演示，请继续关注。

们经常看到许多网站或者H5的动画都做成了整屏切换的形式，为提高用户体验，会在首屏页面下方放上一个动态的向下箭头来提示用户切换至下一屏。

动态箭头的效果图如下：

那么这种效果是如何实现的呢？

其实非常简单，在CSS3中提供了animation属性，专门用于动画。要使用这个属性，需要先了解@keyframes的创建规则，在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

在这个动画中，我们能够看出在整个动画中改变的是箭头的位置，所以我们在创建动画时，只需要给定箭头的起始位置，利用animation让他动起来就可以了。

接下来，我们一步一步完成。

1、首先找到你所需要的箭头图片，将他利用定位的方式放在首屏的底部。

a)html代码（将图片以背景或者插入图片的形式放入标签内，demo以背景形式展示）

b)css代码（利用定位将箭头放在首屏的底部适当位置，网站中大部分情况会进行左右居中）

2、然后进行动画创建，最简单的方式就是只给定初始的以及结束的css样式即可。

css 代码

标注出来的为动画的自定义名称，可以根据你的动画行为来定义。

0%为初始状态，即刚开始动画时。

100%为结束状态，即动画进行到100%时。

动画改变了箭头的底部位置，由距离底部80像素变到了距离底部0像素。

3、接下来利用animation属性让他具有动画效果

css代码：

第一个参数表示你所使用的动画的名称（即我们创建的动画的动画名称），

第二个参数表示动画完成的时间（即由0%到100%所用的时间），

第三个参数表示动画执行的次数（可以为任意数字，infinite表示规定动画无限次播放），因此造成了一个动态的箭头的视觉效果。

通过以上三个步骤即可完成这个简单的动画效果，很多的动画效果都可以通过创建动画的方式来实现。

原文地址北京市盛世阳光文化传播有限责任公司：http://www.gonet.com.cn/webduirshow-140.html

多特效代码请添加HTML5前端交流群581549454

废话不多说，上代码！

网站格式代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

* { margin:0; padding:0; }

body { position:relative; width:100%; height:100%; overflow:hidden; }

button { color:#222; font-size:20px; padding:5px 20px; width:120px; }

#btn1 { position:absolute; top:10px; left:10px; }

#btn2 { position:absolute; top:60px; left:10px; }

#btn3 { position:absolute; top:110px; left:10px; }

#btn4 { position:absolute; top:160px; left:10px; }

#btn5 { position:absolute; top:210px; left:10px; }

#btn6 { position:absolute; top:260px; left:10px; }

#btn7 { position:absolute; top:310px; left:10px; }

#btn8 { position:absolute; top:360px; left:10px; }

#btn9 { position:absolute; top:410px; left:10px; }

#btn0 { position:absolute; top:460px; left:10px; }

</style>

<title>漂亮的Canvas鼠标箭头跟随动画特效</title>

</head>

</div>

$(document).ready(function() {

var canvas = document.getElementById("c");

var ctx = canvas.getContext("2d");

var c = $("#c");

var x,y,w,h,cx,cy,l;

var y = [];

var b = {

n:100,

c:false, // 颜色如果是false 则是随机渐变颜色

bc:'#000', // 背景颜色

r:0.9,

o:0.05,

a:1,

s:20,

}

var bx = 0,by = 0,vx = 0,vy = 0;

var td = 0;

var p = 0;

var hs = 0;

re();

var color,color2;

if(b.c){

color2 = b.c;

}else{

color = Math.random()*360;

}

$(window).resize(function(){

re();

});

var tp1=true,tp2 = false,tp3 = false,tp4 = false,tp5 = false,tp6 = false,tp7 = false,tp8 = false,tp9 = false,tp0 = false;

function begin(){

if(tp1){

if(!b.c){

color+=.1;

color2 = 'hsl('+color+',100%,80%)';

}

ctx.globalAlpha = 1;

ctx.fillStyle = b.bc;

ctx.fillRect(0,0,w,h);

for(var i=0;i<y.length;i++){

ctx.globalAlpha = y[i].o;

ctx.fillStyle = color2;

ctx.beginPath();

ctx.arc(y[i].x,y[i].y,y[i].r,0,Math.PI*2);

ctx.closePath();

ctx.fill();

y[i].r+=b.r;

y[i].o-=b.o;

if(y[i].o<=0){

y.splice(i,1);

i--;

};

}

}else if(tp2){

if(!b.c){

color+=.1;

color2 = 'hsl('+color+',100%,80%)';

}

ctx.globalAlpha = 1;

ctx.fillStyle = b.bc;

ctx.fillRect(0,0,w,h);

for(var i=0;i<y.length;i++){

ctx.globalAlpha = y[i].o;

ctx.fillStyle = color2;

ctx.beginPath();

y[i].r=10;

ctx.shadowBlur=20;

ctx.shadowColor=color2;

ctx.arc(y[i].x,y[i].y,y[i].r,0,Math.PI*2);

ctx.closePath();

ctx.fill();

ctx.shadowBlur=0;

y[i].o-=b.o;

y[i].v+=b.a;

y[i].y+=y[i].v;

if(y[i].y>=h+y[i].r || y[i].o<=0){

y.splice(i,1);

i--;

};

}

}else if(tp3){

if(!b.c){

color+=.1;

color2 = 'hsl('+color+',100%,80%)';

}

td+=5;

ctx.globalAlpha = 1;

ctx.fillStyle = b.bc;

ctx.fillRect(0,0,w,h);

for(var i=0;i<y.length;i++){

ctx.globalAlpha = y[i].o;

ctx.fillStyle = color2;

ctx.beginPath();

ctx.shadowBlur=20;

ctx.shadowColor=color2;

y[i].r=(1-(y[i].y/h))*20;

ctx.arc(y[i].x,y[i].y,y[i].r,0,Math.PI*2);

ctx.closePath();

ctx.fill();

ctx.shadowBlur=0;

y[i].o=y[i].y/h;

y[i].v+=b.a;

y[i].y-=b.s;

y[i].x+=(Math.cos((y[i].y+td)/100)*10);

if(y[i].y<=0-y[i].r || y[i].o<=0){

y.splice(i,1);

i--;

};

}

}else if(tp4){

if(!b.c){

color+=.1;

color2 = 'hsl('+color+',100%,80%)';

}

ctx.globalAlpha = 1;

ctx.fillStyle = b.bc;

ctx.fillRect(0,0,w,h);

for(var i=0;i<y.length;i++){

ctx.globalAlpha = y[i].o;

ctx.fillStyle = color2;

ctx.beginPath();

ctx.shadowBlur=20;

ctx.shadowColor=color2;

y[i].vx2 += (cx - y[i].wx)/1000;

y[i].vy2 += (cy - y[i].wy)/1000;

y[i].wx+=y[i].vx2;

y[i].wy+=y[i].vy2;

y[i].o-=b.o/2;

y[i].r=10;

ctx.arc(y[i].wx,y[i].wy,y[i].r,0,Math.PI*2);

ctx.closePath();

ctx.fill();

ctx.shadowBlur=0;

if(y[i].o<=0){

y.splice(i,1);

i--;

};

}

}else if(tp5){

if(!b.c){

color+=.1;

color2 = 'hsl('+color+',100%,80%)';

}

ctx.globalAlpha = .18;

ctx.fillStyle = b.bc;

ctx.fillRect(0,0,w,h);

p+=5;

ctx.globalAlpha = 1;

ctx.fillStyle = color2;

ctx.beginPath();

ctx.shadowBlur=20;

ctx.shadowColor=color2;

ctx.arc(cx+50*Math.cos(p*Math.PI/180),cy+50*Math.sin(p*Math.PI/180),10,0,Math.PI*2);

ctx.closePath();

ctx.fill();

ctx.beginPath();

ctx.arc(cx+50*Math.cos((p+180)*Math.PI/180),cy+50*Math.sin((p+180)*Math.PI/180),10,0,Math.PI*2);

ctx.closePath();

ctx.fill();

ctx.beginPath();

ctx.arc(cx+50*Math.cos((p+90)*Math.PI/180),cy+50*Math.sin((p+90)*Math.PI/180),10,0,Math.PI*2);

ctx.closePath();

ctx.fill();

ctx.beginPath();

ctx.arc(cx+50*Math.cos((p+270)*Math.PI/180),cy+50*Math.sin((p+270)*Math.PI/180),10,0,Math.PI*2);

ctx.closePath();

ctx.fill();

ctx.shadowBlur=0;

}else if(tp6){

if(!b.c){

color+=.1;

color2 = 'hsl('+color+',100%,80%)';

}

ctx.globalAlpha = 0.2;

ctx.fillStyle = b.bc;

ctx.fillRect(0,0,w,h);

for(var i=0;i<y.length;i++){

ctx.globalAlpha = y[i].o;

ctx.strokeStyle = color2;

ctx.beginPath();

ctx.lineWidth = 2;

ctx.moveTo(y[i].x,y[i].y);

ctx.lineTo((y[i].wx+y[i].x)/2+Math.random()*20,(y[i].wy+y[i].y)/2+Math.random()*20);

ctx.lineTo(y[i].wx,y[i].wy);

ctx.closePath();

ctx.stroke();

y[i].o-=b.o;

if(y[i].o<=0){

y.splice(i,1);

i--;

};

}

}else if(tp7){

if(!b.c){

color+=.1;

color2 = 'hsl('+color+',100%,80%)';

}

ctx.globalAlpha = 0.2;

ctx.fillStyle = b.bc;

ctx.fillRect(0,0,w,h);

if(y.length<b.n*2){

hs = Math.random()*2*Math.PI;

y.push({x:cx+((Math.random()-.5)*100*Math.cos(hs)),y:cy+((Math.random()-.5)*100*Math.cos(hs)),o:1,h:hs});

}

for(var i=0;i<y.length;i++){

ctx.globalAlpha = y[i].o;

ctx.fillStyle = color2;

ctx.beginPath();

y[i].x+=(cx-y[i].x)/10;

y[i].y+=(cy-y[i].y)/10;

ctx.arc(y[i].x,y[i].y,1,0,Math.PI*2);

ctx.closePath();

ctx.fill();

y[i].o-=b.o;

if(y[i].o<=0){

y[i].h = Math.random()*2*Math.PI;

y[i].x = cx+((Math.random()-.5)*100*Math.cos(y[i].h));

y[i].y = cy+((Math.random()-.5)*100*Math.sin(y[i].h));

y[i].o = 1;

};

}

}else if(tp8){

if(!b.c){

color+=.1;

color2 = 'hsl('+color+',100%,80%)';

}

ctx.globalAlpha = 0.2;

ctx.fillStyle = b.bc;

ctx.fillRect(0,0,w,h);

ctx.fillStyle = color2;

if(cx%4 == 0){

cx+=1;

}else if(cx%4 == 2){

cx-=1

}

else if(cx%4 == 3){

cx-=2

}

if(cy%4 == 0){

cy+=1;

}else if(cy%4 == 2){

cy-=1

}

else if(cy%4 == 3){

cy-=2

}

for(var i=cx-60;i<cx+60;i+=4){

for(var j=cy-60;j<cy+60;j+=4){

if(Math.sqrt(Math.pow(cx-i,2)+Math.pow(cy-j,2))<=60){

ctx.globalAlpha = 1-(Math.sqrt(Math.pow(cx-i,2)+Math.pow(cy-j,2))/60);

if(Math.random()<.2){

ctx.fillRect(i,j,3,3);

}

}else if(tp9){

if(!b.c){

color+=.1;

color2 = 'hsl('+color+',100%,80%)';

}

ctx.globalAlpha = 0.2;

ctx.fillStyle = b.bc;

ctx.fillRect(0,0,w,h);

ctx.fillStyle = color2;

if(cx%4 == 0){

cx+=1;

}else if(cx%4 == 2){

cx-=1

}

else if(cx%4 == 3){

cx-=2

}

if(cy%4 == 0){

cy+=1;

}else if(cy%4 == 2){

cy-=1

}

else if(cy%4 == 3){

cy-=2

}

if(y.length<b.n){

y.push({x:cx,y:cy,xv:0,yv:0,o:1});

}

for(var i=0;i<y.length;i++){

if(y[i].xv==0 && y[i].yv==0){

if(Math.random()<.5){

y[i].xv = 3;

}else{

y[i].xv = -3;

}

}else{

if(Math.random()<.5){

y[i].yv = 3;

}else{

y[i].yv = -3;

}

}else{

if(y[i].xv == 0){

if(Math.random()<.66){

y[i].yv = 0;

if(Math.random()<.5){

y[i].xv = 3;

}else{

y[i].xv = -3;

}

}else if(y[i].yv == 0){

if(Math.random()<.66){

y[i].xv = 0;

if(Math.random()<.5){

y[i].yv = 3;

}else{

y[i].yv = -3;

}

y[i].o-=b.o/2;

ctx.globalAlpha = y[i].o;

y[i].x+=y[i].xv;

y[i].y+=y[i].yv;

ctx.fillRect(y[i].x,y[i].y,3,3);

if(y[i].o<=0){

y.splice(i,1);

i--;

};

}

}else if(tp0){

if(!b.c){

color+=.1;

color2 = 'hsl('+color+',100%,80%)';

}

ctx.globalAlpha = 0.2;

ctx.fillStyle = b.bc;

ctx.fillRect(0,0,w,h);

ctx.fillStyle = color2;

y.push({x:cx,y:cy,xv:2,yv:1,o:1});

for(var i=0;i<y.length;i++){

y[i].o-=b.o/10;

ctx.globalAlpha = y[i].o;

y[i].x+=(Math.random()-.5)*4;

y[i].y-=1;

ctx.fillRect(y[i].x,y[i].y,2,2);

if(y[i].o<=0){

y.splice(i,1);

i--;

};

}

window.requestAnimationFrame(begin);

}

function re(){

w = window.innerWidth;

h = window.innerHeight;

canvas.width = w;

canvas.height = h;

cx = w/2;

cy = h/2;

};

c.mousemove(function(e){

cx = e.pageX-c.offset().left;

cy = e.pageY-c.offset().top;

if(tp4){

if(Math.random()<=.5){

bx = -10;

}else{

bx = w+10;

}

by = Math.random()*h;

}else{

if(Math.random()<=.5){

by = -10;

}else{

by = h+10;

}

bx = Math.random()*w;

}

vx = (Math.random()-.5)*8;

vy = (Math.random()-.5)*8;

}

if(tp1 || tp2 || tp3){

y.push({x:cx,y:cy,r:b.r,o:1,v:0});

}else if(tp4){

y.push({x:cx,y:cy,r:b.r,o:1,v:0,wx:bx,wy:by,vx2:vx,vy2:vy});

}else if(tp6){

y.push({x:cx+((Math.random()-.5)*30),y:cy+((Math.random()-.5)*30),o:1,wx:cx,wy:cy});

}

});

/*c.mousedown(function(){

c.on('mousemove',function(e){

cx = e.pageX-c.offset().left;

cy = e.pageY-c.offset().top;

y.push({x:cx,y:cy,r:b.r,o:1});

});

c.on('mouseup',function(){

c.off('mouseup');

c.off('mousemove');

c.off('moseleave');

});

c.on('mouseleave',function(){

c.off('mouseup');

c.off('mousemove');

c.off('moseleave');

});

});*/

$("#btn1").click(function(){

tp1 = true;

tp2 = false;

tp3 = false;

tp4 = false;

tp5 = false;

tp6 = false;

tp7 = false;

tp8 = false;

tp9 = false;

tp0 = false;

y=[];

});

$("#btn2").click(function(){

tp1 = false;

tp2 = true;

tp3 = false;

tp4 = false;

tp5 = false;

tp6 = false;

tp7 = false;

tp8 = false;

tp9 = false;

tp0 = false;

y=[];

});

$("#btn3").click(function(){

tp1 = false;

tp2 = false;

tp3 = true;

tp4 = false;

tp5 = false;

tp6 = false;

tp7 = false;

tp8 = false;

tp9 = false;

tp0 = false;

y=[];

});

$("#btn4").click(function(){

tp1 = false;

tp2 = false;

tp3 = false;

tp4 = true;

tp5 = false;

tp6 = false;

tp7 = false;

tp8 = false;

tp9 = false;

tp0 = false;

y=[];

});

$("#btn5").click(function(){

tp1 = false;

tp2 = false;

tp3 = false;

tp4 = false;

tp5 = true;

tp6 = false;

tp7 = false;

tp8 = false;

tp9 = false;

tp0 = false;

y=[];

});

$("#btn6").click(function(){

tp1 = false;

tp2 = false;

tp3 = false;

tp4 = false;

tp5 = false;

tp6 = true;

tp7 = false;

tp8 = false;

tp9 = false;

tp0 = false;

y=[];

});

$("#btn7").click(function(){

tp1 = false;

tp2 = false;

tp3 = false;

tp4 = false;

tp5 = false;

tp6 = false;

tp7 = true;

tp8 = false;

tp9 = false;

tp0 = false;

y=[];

});

$("#btn8").click(function(){

tp1 = false;

tp2 = false;

tp3 = false;

tp4 = false;

tp5 = false;

tp6 = false;

tp7 = false;

tp8 = true;

tp9 = false;

tp0 = false;

y=[];

});

$("#btn9").click(function(){

tp1 = false;

tp2 = false;

tp3 = false;

tp4 = false;

tp5 = false;

tp6 = false;

tp7 = false;

tp8 = false;

tp9 = true;

tp0 = false;

y=[];

});

$("#btn0").click(function(){

tp1 = false;

tp2 = false;

tp3 = false;

tp4 = false;

tp5 = false;

tp6 = false;

tp7 = false;

tp8 = false;

tp9 = false;

tp0 = true;

y=[];

});

(function() {

var lastTime = 0;

var vendors = ['webkit', 'moz'];

for(var xx = 0; xx < vendors.length && !window.requestAnimationFrame; ++xx) {

window.requestAnimationFrame = window[vendors[xx] + 'RequestAnimationFrame'];

window.cancelAnimationFrame = window[vendors[xx] + 'CancelAnimationFrame'] ||

window[vendors[xx] + 'CancelRequestAnimationFrame'];

}

if (!window.requestAnimationFrame) {

window.requestAnimationFrame = function(callback, element) {

var currTime = new Date().getTime();

var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));

var id = window.setTimeout(function() {

callback(currTime + timeToCall);

}, timeToCall);

lastTime = currTime + timeToCall;

return id;

};

}

if (!window.cancelAnimationFrame) {

window.cancelAnimationFrame = function(id) {

clearTimeout(id);

};

}

}());

begin();

});

</script>

</body>

</html>

JS代码过多没有在这里展示，大家可在群内查找

在线咨询

上一篇：如何实现将PDF和html相互转换
下一篇：网页颜色一键变灰？分享 1 段优质 CSS 代码片段！

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Web前端开发基础知识，设置网页背景图，如何在网页中插入图片

一、图片的表现形式

二、创建内容图片

三、创建布局图片

四、创建用户交互图片

您的项目需求