一、css控制背景
背景图片,默认情况下是平铺的,并且在左上角;、
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>css控制背景与css精灵</title>
<style type="text/css">
body,div{margin:0;padding:0;}
body{padding:100px;}
#tok{width:700px;
height:700px;
background-color:gold;
background-image:url(images/timg.jpg);
}
</style>
</head>
<body>
<div id="tok">div 默认是个块元素,很霸道,独占一行</div>
</body>
</html>
background-repeat:no-repeat;
background-position:center center;
(2)、除了上述用几个单词进行定位外,还可以直接用数值来定位;
/*background-position:center center;*/
background-position:100px 200px;
(3)、设置图片是否随框移动或者固定(默认是滚动的)
图片的依附方式:固定的含义:将图片固定在屏幕(可视区域)的某个位置;用background-attachment属性实现;
/*background-position:center center;*/
/*background-position:100px 200px;*/
background-attachment:fixed;
兼容性:IE6只有HTML和body两个元素,支持这个属性值;
(4)、接下来介绍一种让你显得专业一点的技巧:
翻转效果:其实思路就是准备两张大小相同、内容不同的图片,正常情况下显示一张,鼠标经过的时候显示另一张。如下所示:
:link 伪类,表示一种状态
a{
width:88px;
height:44px;
display:block;
/* background:#ECECED;*/
background:url(images/link.png) no-repeat;
}
a:hover{
<body>
<a href="#"></a>
<a href="#" id="btn"></a>
</body>