背景图片时一个雪碧图。图片写在数组中通过循环获取

最新推荐文章于 2023-03-12 16:51:50 发布
最新推荐文章于 2023-03-12 16:51:50 发布
阅读量835 收藏
点赞数
分类专栏： 前端小知识 图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33769914/article/details/79461709
版权
这篇博客介绍了如何利用CSS雪碧图技术来实现背景图片的循环展示。通过定义一个包含不同位置的背景图片样式，并在JavaScript中进行循环拼接，将不同的背景位置应用到元素上，从而达到动态展示效果。
摘要由CSDN通过智能技术生成

css

因为引用的是一个图片，只是位置的变化。所有直接在css里面设置背景图

.pic{width:80px;height:80px;display:inline-block;background:url('img/index.png') no-repeat;}

<ul class="app_list_box"></ul>
<script src="js/jquery-3.1.1.min.js"></script>
<script>
    var pic=['<div class="pic" style="background-position:-15px -15px" ></div>',  
         '<div class="pic" style="background-position:-102px -15px"></div>',
         '<div class="pic" style="background-position:-189px -15px"></div>',
         '<div class="pic" style="background-position:-277px -15px"></div>',
最低0.47元/天 解锁文章
肖肖肖丽珠
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS背景图片、雪碧图片合并工具CssSprite
10-22
CssSprite是一款很好用的小图合并工具，能自动生成CSS代码，导入小图就可以直接用了~
循环调接口获取数据是[Promise]格式
qq_42600647的博客
12-09 695
【代码】循环调接口获取数据是[Promise]格式。
Web前端之背景、雪碧图
花&败
10-29 845
repeatrepeat-xrepeat-yno-repeattopleftrightbottomcentercenterborder-boxborder-boxautocovercontainscrollfixed可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置并且该样式没有顺序要求，也没有哪个属性是必须写的orginclip。
8.背景 雪碧图
最新发布
m0_72928968的博客
03-12 100
在早期的网页中，几乎所有的小图标都是通过雪碧图来实现的，随着图标字体的广泛使用，雪碧图的使用也变得相对少了一些。- 所谓CSS-Sprite就是指，将多个小的图片统一放入到一个大图片（雪碧图）中，在图片加载完成前，超链接处在没有背景图片可以显示的状态，所以会显示空白。在图片加载完成前，超链接处在没有背景图片可以显示的状态，所以会显示空白。这是因为，浏览器在加载外部资源时，是以懒加载的形式来完成的。这是因为，浏览器在加载外部资源时，是以懒加载的形式来完成的。
css_数组展示(循环)——for----in
Ason_haiyu的博客
12-29 2354
数组 var name=["郑爽","杨幂","唐嫣"]; //使用for--in循环输出数组的东西 for(var i in name){ //i 每个索引值 document.write(name[i]); }
背景图片数组
weixin_43343423的博客
04-27 215
<body> <div class="continer"> <!--上部分-->11 <div class="main"> <ol> <li> <div class="mainlst f...
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
09-05
同时，可以使用一个1像素的透明GIF图片作为`<img>`标签的`src`属性，然后通过CSS样式来显示实际的图片。例如： ```html ``` ```css .yahoo { background: url('img/yahoo.png') no-repeat; width: 16px; height...
IE6图片加载的一个BUG解决方法
10-29
在IE6中，当使用CSS将同一图片设置为多个元素的背景时，浏览器会为每个元素发起一个新的HTTP请求来获取图片，而不是从缓存中读取，这会导致页面加载速度变慢和服务器负载增加。 为了优化页面加载速度并减少服务器...
论文研究-雪碧图在网站优化中的应用原理分析 .pdf
08-19
雪碧图（CSS Sprites）是一种在网站优化中常用的技术，其核心原理是将网页中多个小型图片资源合并成一张单独的大图片，通过CSS技术对大图片进行背景定位，只显示大图片中的特定部分，从而减少网页加载时的HTTP请求...
浅谈css中图片定位之所有图标放在一张图上
09-25
在CSS中，我们可以通过背景定位（background-position）属性来控制图片在元素中的显示位置。例如，描述中提到的例子： ```css .ltlogo a { background: url("img/ltlogo.gif") no-repeat left 15px; } .ltlogo a:...
JavaScript设置背景图片
Return_KB的博客
01-09 5万+
本章节通过代码实例介绍一下如何利用js实现动态的为div元素设置背景图片。 核心代码片段如下: [JavaScript] 纯文本查看 复制代码运行代码1odiv.style.backgroundImage="url('images/test.jpg')"; 下面给出一个完整的代码实例，使用的背景图片如下: 309x99的图片分隔为9份，每一份的长宽分别是103px和
精灵图（sprite 雪碧图）在vue for 循环中的使用问题
weixin_44902450的博客
05-10 836
背景：想做一个类似于csdn博客的排行页面，排行的序号是一张精灵图，根据不同的位置来实现的。 最终实现效果如下： 准备工作： 精灵图 vue组件部分代码 <div class="blog" v-for="(item, index) in userDetails" :key="index"> <div class="item"> <span class="number rank-number"></sp.
教你来使用雪碧图（CSS sprite）
热门推荐
Allenyhy的博客
08-07 6万+
什么是雪碧图？ 雪碧图是根据CSS sprite音译过来的，就是将很多很多的小图标放在一张图片上，就称之为雪碧图。 使用雪碧图的目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多很多的小图标，浏览器在显示页面的时候，就需要像服务器发送很多次访问请求，这样一来，一是造成资源浪费，二是会导致访问速度变慢。这时候，把很多小图片（需要使用的小图标）放在一张图片上，按照一定的...
javascript 两种方式实现动态雪碧图
老刘的日志博客
01-14 3466
function changePicture() { //拿到div对象 var gallery = document.getElementById("picture_gallery"); var gallert_img = document.getElementsByTagName("img"); var atag = document.getElementsByTa
使用雪碧图作为封面图片单张显示的技巧解决图片切换出现空白
qq_41556706的博客
12-21 673
一：解决问题    在开发前端的时候我们有时候会遇到需要不断的切换背景图片，而且背景图片是铺满整个页面的，这时候在手机端当切换整个页面的背景图片时就会发一个短暂的留白，这种问题主要会出现在采用框架开发，切手机端显示时。 二：如何解决：  可以将多张图片合成一张雪碧图，然后在切换背景图片的时候实际切换背景图片的位置，这样就能够解决了 三：解决方案：  结合background-size以及...
vue2中如何绘制雪碧图
03-02
在Vue2中绘制雪碧图，可以使用CSS的background-position属性来控制图片的位置，实现切换雪碧图中不同的图片。具体步骤如下： 1.在Vue组件的样式中定义background-image为雪碧图的地址，background-size为图片的宽度和高度，同时设置background-repeat为no-repeat，确保图片不会重复。 2.在Vue组件中定义一个变量，表示当前显示的图片在雪碧图中的位置。 3.在Vue组件的样式中使用background-position属性，将变量对应的位置值赋给background-position，这样就可以显示对应位置的图片。 4.在Vue组件的逻辑中，通过改变变量的值来切换显示不同的图片，从而实现雪碧图的动态效果。 示例代码如下： ```html <template> <div class="sprite-demo"></div> </template> <script> export default { data() { return { spritePosition: '0 0' // 默认显示雪碧图的第一张图片 } }, methods: { switchSprite() { // 切换雪碧图位置，显示不同的图片 this.spritePosition = '-50px 0' } } } </script> <style> .sprite-demo { width: 50px; height: 50px; background-image: url('sprite.png'); background-size: 100px 50px; // 雪碧图的宽度和高度 background-repeat: no-repeat; background-position: {{ spritePosition }}; } </style> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值