一直以来都认为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...
如果不在span中输入任何文本，span设置的背景图将无法显示出来。解决办法就是设置为块元素，然后设置固定的宽高。参考：http://blog.csdn.net/jarniyy/article/details/49812787再进一步研究，涉及到两个概念：行内元素和块元素。个人理解：行内元素对其设置宽度和高度没有意义，他是根据内容的大小来显示的。所以你对其设置背景而不对其输入文字，将无法显示。代表：span。参考：http://www.w3school.com.cn/tags/tag_span.asp块元...
给我一个渐变的效果鼠标移入能看到效果<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">.d1{width: 200px;height: 200px;background: green;position: relative;overflow: hidden;} .d2{width: 200px;height: 200px;z-index: 1;position: absolute;}
.d2:before{content: "";position: absolute;width: 100%;height: 100%;top: 100%;background: red;z-index: -2;transition: all 0.5...
一、语义与呈现分离1、将元素的语义与元素对其内容呈现结果的影响分开2、只要有条件，尽量避用那些具有浓重呈现意味或纯粹起呈现作用的元素 二、元素选用原则1、少亦可为多：标记只应该应内容对语义的需要使用2、别误用元素：对内容进行标记时，只宜将元素用作它们原定的用途，不要创造自有的语义3、具体为佳，一以贯之：用来标记内容的元素应该选择最为具体的那个，如果已有元素能恰当表明内容的类型，就不要使用通用元素4、对用...
<audio controls="controls" height="100" width="100"> <source src="小果 - 蒲公英的梦想.mp3" type="audio/mp3" /> <source src="小果 - 蒲公英的梦想.ogg" type="audio/ogg" /> <embed height="100" width="100" src="小果 - 蒲公英的梦想.mp3" /></audio>上面的例子使用了两个不同的音频格式。HTML5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试 <embed> 元素。如果你不需要这个播放器，而是直接...
IE6下CSS背景图片闪烁的Bug（ie6下的背景图片缓存问题）
IE6下的背景图片每次使用都会重新发送请求(非本地)，连一个hover效果时候同样的背景图片仅仅位置不同而已，ie6都会再次发送请求，这个令人崩溃的事情需要解决掉：对于ie来说，filter:expression 很强大，能够实现的功能超级多，但是更对于视效率如生命的程序员来说，它的效率不敢令人恭维，所以有人会用css方法实现ie6下背景图片缓存，但是这种人也就是崇拜微软的强大而已：...
在实际项目开发过过程中，页面是上传到服务器上的。而为了减少服务器的压力，让用户少加载，浏览器会将图片、css、js缓存到本地中，以便下次访问网站时使用。这样做不仅减少了服务器的压力，并且也减少了用户的下载次数，获得更好的用户体验。 然而在版本升级或做一些css、js等调整的时候，缓存导致用户无法显示更新后的样式，这是另人头头疼的问题。除非用户自行手动升级缓存，不过几乎所有用户不会为了正常访问这个网站而去...
