<div id="web_bg" style="position:absolute; width:100%; height:100%; z-index:-1"><img style="position:fixed;" src="www.xxxx.com/images/5.jpg" height="100%" width="100%"/></div>原文：http://www.cnblogs.com/yutaoyao/p/4164415.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"/><title>css实现背景图片自适应大小</title></head><body><html><style>body{margin:0px;padding: 0px;width: 100%;height: 100%;}#bg_bg{width: 100%;height: 100%;border :...
图片本身的优化： 图像质量要求和图像文件大小决定你用什么格式的图片，用较小的图片文件呈现较好的图像质量。 当图片色彩过于丰富且无透明要求时，建议采用jpg格式并保存为较高质量。 当图片色彩过于丰富又有透明或半透明要求或阴影效果时，建议采用png24格式，并对IE6进行png8退化（或在不得已情况下使用滤镜）。 当图片色彩不太丰富时无论有无透明要求，请采用png8格式，大多数情况下建议采用这种格式。 当图片有动画时，只能使...
我们可以为单元格设置背景图像，可以使用任何GIF或者JPEG图片文件。基本语法<TD BACKGROUND=FILE_name> 语法解释定义背景图象时，写下图片文件的完整路径或者相对路径。文件范例：10-25.htm设定单元格的背景图象。01 <!-- ------------------------------ -->02 <!-- 文件范例：10-25.htm -->03 <!-- 文件说明：设定单元格的背景图像 -->04 <!-- ------------------------------ -->05 <HTML>06 <HEAD>07 <TITLE>设定单元格的背景图...
译文原链接：http://codetheory.in/html5-fullscreen-background-video/前言：当网页载入时，自动播放的全屏背景视频 已经成为当前颇受欢迎的趋势。 就个人而言，我认为自动播放、质量好的视频会增加用户/客户的参与度。应该记住，视频的故事必须与品牌相关。 近年来，我们被FB和Twitter等社交网络上的大量视频所包围。 据研究由此引起了用户更多的参与。最近我不得不在一个网站上实现相同的功能，因此我决定构建一个用到 HTML5 视...
如何巧用HTML5设计按钮背景不同动画特效，在该特效中，当鼠标滑过按钮时，使用CSS3 animation 来动画 background-size 和 background-position 属性，来实现各种背景动画效果。下面来看一下整体的效果图： 具体实现：1. CSS样式 首先为按钮设置通用样式。将按钮的背景去除，设置2像素的实线边框，并将底部边框设置为4个像素。通过padding来设置按钮的尺寸，并为按钮的文字颜色设置平滑动画过渡效果。第一种按钮背景动画：...
一直以来都认为css背景图与直接插入img图片的效果是差不多的，直到最近拜读了一位大神的作品，发现大部分图片都是通过背景图形式显示的，于是在此总结了下二者的区别：1. css中的图片以背景图形式存在，写在html中的图片以标签形式存在。而在网页加载过程中，以css背景存在的图片会等到html结构加载完成才开始加载，而html中的img标签是网页结构（内容）的一部分会在加载结构的过程中加载。附：在一个单纯由Html和Css组成的页面中，...
HTML代码：
<audio id="myaudio" loop="loop" preload="auto" autoplay="autoplay">
<source src="music/纯音乐%20-%20在那遥远的地方%20-%20纯音乐版.mp3" type="audio/ogg" />
<source src="music/纯音乐%20-%20在那遥远的地方%20-%20纯音乐版.mp3" type="audio/mp3" />
</audio>
<img onclick="swap_music()" src="/images/icon_music.png" style="height:...
Html&Css07：背景html==>结构css ==>表现js ==>行为1、背景颜色&背景图片&重复方式&位置<style>.box1{width: 500px;height: 500px;/* background-color 设置背景颜色*/background-color: #bfa;/* background-image 设置背景图片 - 可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色- 如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满- 如果背景的图片大于元素，将会一个部分背景无法完全显...
HTML5 CSS3银河系星空闪耀网页背景动画特效，运行本效果后，一幅像银河系的星空图展现眼前，远处星空闪耀，星空整体上同样也具有动画效果，可很好的应用于网页背景中，本背景动画的生成依赖Canvas技术，运行时请选择支持Canvas技术的浏览器，IE就免谈了，推荐Chrome。提示：若不能运行，请将代码保存到本地HTML文件中，然后使用Chrome打开。 【源代码展示】<!doctype html><html><head><meta charset="utf-8"><title>HTML5 Canvas全...
1<html> 2<head> 3<title>背景随机变色</title> 4<script type="text/javascript"> 5var timmerID;6function color(){7 document.bgColor="#"+Math.random()*0xffffff;8 }9function start(){
10 timmerID=window.setInterval("color()",100);
11 }
12function stop(){
13 window.clearInterval(timmerID);
14 }
151617</script>1819</head>20<body...
由于<body>标签的图片不能够拉伸，解决办法：1、图片不够大，又background属性不能拉伸图片；
2、只能用个div，把其z-index值设为负，并使这个div大小为整个body大小，在div里用<img>
3、body的background属性去掉，要不然会被遮住<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charse...
首先，写两个class属性body {margin: 0;padding: 0;height: 100%;width: 100%;background-image: url(../Content/Images/background.jpg);background-repeat: no-repeat;background-size: cover;
}.login {height: 300px;width: 400px;border: 1px solid #f00;position: absolute;left: 50%;top: 50%;margin: -150px 0 0 -200px;
}
上面body设置了背景图，长跟宽百分比为100%，背景图不重复，大小为覆盖整个浏览器。
login样式是登...
链接：https://jingyan.baidu.com/article/ff42efa9c22b11c19e220200.html重点：background-attachment， background-position方法/步骤 首先我们需要插入一张图片，并且图片只出现一次，并设计图片出现的位置在左上角，可以按照如下代码来完成：<html><head><title>图片位置设置</title><style type="text/css">body{background-image:url("2.jpg");background-attachment:scorll;background-repeat:no-repeat;background-posi...
效果截图： 实现代码： 复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title></title> <style type="text/css"> .linear{ width:100%; height:600px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=##15A216,endColorStr=#fafafa); /*IE*/ background:-moz-linear-gradient...
CSS如何设置背景图片水平重复和垂直重复: