关于我们

质量为本、客户为根、勇于拼搏、务实创新

< 返回新闻公共列表

css精灵图技术是什么(css精灵图的优缺点)

发布时间:2022-06-29 14:34:28

1、将页面所涉及的所有零星背景图像集中到大图中,然后将大图用于网页。用户访问页面时,只需向服务器发送一次请求。

2、直接使用background-position等属性来准确定位所需的背景部分。

实例

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <div>        <span></span>        <span></span>        <span></span>    </div></body><style>    .box span {        display: inline-block;    }    .j {        background: url("abcd.jpg") no-repeat -389px -141px;        width: 102px;        height: 112px;    }    .w {        background: url("abcd.jpg") no-repeat -117px -560px;        width: 135px;        height: 112px;    }    .t {        background: url("abcd.jpg") no-repeat -368px -417px;        width: 102px;        height: 112px;    }</style></html>

以上就是css精灵图技术的介绍,希望对大家有所帮助。



相关推荐

【2022年的云计算虚拟化市场现状和发展(云计算未来市场) >>点击查看详情<<

【习近平向“全球发展:共同使命与行动价值”智库媒体高端论坛致贺信 >>点击查看详情<<

/template/Home/Redyun/PC/Static