本文介绍了CSS中的精灵图标技术，如何利用一张大图展示多个小图标。接着讨论了图片廊的实现，并详细讲解了背景的使用，包括设置多个背景、实现背景半透明效果以及创建背景渐变，如径向渐变和线性渐变。
CSS基础(二) 精灵图标 图片廊 背景
1.精灵图标
在一张大图里面找到不同的小图，<background-image>是大图，通过确定不同的坐标<background-position>来显示小图标
<style>
#pic1,#pic2,#pic3,#pic4{
border: 1px solid #0000EE;
float: left;
width: 80px;
height: 80px;
background-image: url(img/a.png);
background-repeat: no-repeat;}
#pic1{
background-position:-180px -3px;}
#pic2{
background-position:-505px -100px}
#pic3{
background-position:-180px -190px;}
#pic4{
background-position:-650px -270px;}
</style>
<body>
<div id="pic">
<div id="pic1"></div>
<div id="pic2"></div>
<div id="pic3"></div>
<div id="pic4"></div>
</div>
</body>
2.图片廊
<style>
div.img{
margin: 10px;
border: 1px solid #5F9EA0;
float: left;}
div.img:hover{
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
