CSS3响应式控制精灵图的大小和位置

最新推荐文章于 2024-05-23 16:05:38 发布

敬畏智心

最新推荐文章于 2024-05-23 16:05:38 发布

阅读量1.2w

点赞数

分类专栏：前端文章标签： css3 javascript html 响应式

本文链接：https://blog.csdn.net/ranmudaofa/article/details/38912829

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1. html和css代码如下：

<!DOCTYPE html>

<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>CSS3精灵图响应式控制</title>
   <style type="text/css">
   *{ margin: 0; padding: 0; border: 0; }
   div{ position: relative;}
   .box{ width: 80%; height: 100px; margin: 100px auto; border: 1px solid #f00; background-color: rgba(0, 0, 0, 0.3);}
   .one{ float: left; width: 50%; height: 100px; background-color: rgba(123, 231, 312, 0.5);}
   .two{ float: right; width: 50%; height: 100px; background-color: rgba(111, 222, 122, 0.4);}

   .box:before, .one:before{ content: ""; background: url(icon.png) no-repeat; -webkit-background-size: 80px 280px;}
   .one:before{ width: 40px; height: 23px; position: absolute; background-position: 0 0; left: 100%;
       background-color: #f00; z-index: 99; transform: translate(-50%, 0); }

   </style>
</head>
<body>
   <div class="box">
       <div class="one"></div>
       <div class="two"></div>
   </div>
</body>

</html>

2. 精灵图如下

3. 效果如下，可以页面大小随便调整。飞机的位置适中位于连个盒子中间。

敬畏智心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3响应式控制精灵图的大小和位置

1. html CSS3精灵图响应式控制 *{ margin: 0; padding: 0; border: 0; } div{ position: relative;} .box{ width: 80%; height: 100px; margin: 100px auto; border: 1px solid #f00; b
复制链接

扫一扫