CSS补充之精灵图-背景图片大小-background连写拓展-文字阴影-盒子阴影-过渡

最新推荐文章于 2024-03-20 15:25:47 发布
最新推荐文章于 2024-03-20 15:25:47 发布
阅读量276 收藏 1
点赞数 1
分类专栏： css 文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45708377/article/details/125945349
版权
本文介绍了CSS中的精灵图技术，详细阐述了如何利用精灵图减少服务器请求，提高页面加载速度。同时，讲解了背景图片大小的设置，background属性的连写拓展，以及如何实现文字和盒子的阴影效果，最后提到了CSS的过渡效果，为前端开发者提供了实用技巧。
摘要由CSDN通过智能技术生成

一.精灵图

Ø 场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
Ø 优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
Ø 例如：需要在网页中展示8张小图片
• 8张小图片分别发送 → 发送8次
• 合成一张精灵图发送 → 发送1次
在这里插入图片描述
1.1精灵图的使用步骤

  1. 创建一个盒子
  2. 通过PxCook量取小图片大小，将小图片的宽高设置给盒子
  3. 将精灵图设置为盒子的背景图片
  4. 通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y
    在这里插入图片描述
    在这里插入图片描述

二.背景图片大小

在这里插入图片描述

最低0.47元/天 解锁文章
小琳爱分享
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
利用CSS定位背景图片 background-position
12-11
我们知道在用图片作为背景的时候，css要这样写，以div容器举例子，也可以是body、td、p等的背景，道理一样。 代码： div{ background:#FFF url(image) no-repeat fixed x y;} 这里的backg
【前端学习笔记】(八)（精灵图、背景图大小、文字阴影、盒子阴影、过渡）
weixin_48650082的博客
04-26 443
目录一、精灵图1.1 精灵图的介绍1.2 精灵图的使用步骤二、背景图片大小2.1 背景图片大小2.2 background连写拓展三、文字阴影四、盒子阴影五、过渡 一、精灵图 1.1 精灵图的介绍 ➢ 场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图 ➢ 优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度 ➢ 例如：需要在网页中展示8张小图片 • 8张小图片分别发送 → 发送8次 • 合成一张精灵图发送 → 发送1 1.2 精灵图的使用步骤 （1）创建一个盒子 （2）通过PxC
background-size和background-position对精灵图的缩放理解
小白的博客
08-24 1508
精灵图在html的缩放和定位理解
【笔记】CSS3背景background属性简写与连写
印记
09-27 756
background-color 背景颜色 background-image 背景图像 background-repeat 重...
css-background属性连写
weixin_51055698的博客
04-08 2980
css中的background属性连写
css background属性连写
weixin_41643133的博客
08-13 6430
background：#fff url('../assets/images/bgc_book.png') no-repeat right top/359px 257px, url('../assets/images/bgc_pc.png') no-repeat 130px 220px/347px 246px; 依次的顺序为：背景颜色 背景图片 背景图片是否重复 背景图片的位置（...
CSS3之背景尺寸Background-size使用介绍
09-25
CSS3中的background-size属性是用于控制元素背景图像的尺寸。无论背景图片的原始尺寸如何，都可以通过这个属性来调整其在元素中的显示大小。background-size属性的引入为网页设计提供了更多的灵活性。 1. 属性值...
css 之 background-position-x
10-30
css 之 background-position-x 是 CSS 中的一个属性，用于设置背景图片的水平位置。这个属性是 background-position 属性的简写形式，专门用于设置背景图片的水平位置。 背景图片的水平位置是指背景图片左上角相...
前端vue-cli项目中使用img图片和background背景图的几种方法
12-30
前端中背景图片极其常用,但是很容易出现各种问题. 一种是脚手架本身资源引用方式的问题,如指定静态资源文件夹. 一种是图片资源引入方式,有时候使用绝对或者相对路径会导致错误. css方法 正常使用background属性即可...
CSS background 简写连写
gcyaozuodashen的博客
06-27 1435
本文章向大家介绍CSS3背景图片background属性简写/连写，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。是否固定或者跟随页面滚动。时间:2022-07-07。
CSS3中关于background一些属性及连写
weixin_44593658的博客
12-26 2258
background-image 它允许为背景添加一个图片或者一个渐变颜色 这里注意渐变色属于image 而不是color 下面我们写一个渐变色的div看看实际用法 .main{ width: 200px; height: 200px; border: 1px solid #333; border-radius: 50%; background-image: linear-gradien...
项目样式补充
bug 消灭师的博客
04-03 277
项目样式补充：精灵图、背景图片大小、文字阴影、盒子阴影、过渡
css的background属性连写
u011200562的博客
07-20 1438
background: rgba(0,0,0,.8) url('assets/images/loading.png') fixed no-repeat center / cover; background：color img_url attachment repeat position / size 颜色， 地址，固定背景，平铺，位置，size
CSS背景连写
最新发布
2301_77584408的博客
03-20 170
特殊情况：在 pc 端，如果盒子大小和背景图片大小一样，此时可以直接写 background : url ()注意点。推荐： background : color image repeat position。属性名： background ( bg )单个属性值的合写，取值之间以空格隔开。①要么把单独的样式写在连写的下面。②要么把单独的样式写在连写的里面。背景相关属性的连写形式。
控制精灵图大小和位置
m0_65104155的博客
11-19 1421
精灵图和精灵图中的小图片大小与开发需要的大小不一样，需要修改精灵图、或者修改精灵图中小图片的大小尺寸。但是在修改过程中会遇到精灵图大小和定位错乱的情况，如何解决？
CSS属性：背景和精灵图
沉梦昂志
06-23 577
CSS 背景属性 常用属性 background 属性连写 background-color 设置元素的背景颜色 background-image 把图像设置为背景 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-position 设置背景图像的位置 background-origin 设置背景图片偏移量的原点 background-repeat 设置背景图像的重复方式 background-size 设置背景图片的尺寸 background-
CSS样式补充（精灵图、背景图片大小，盒子阴影、过渡）
拄着拐儿唱儿歌的博客
05-04 777
CSS样式补充（精灵图、背景图片大小，盒子阴影、过渡）
【CSS3】精灵图 背景图 阴影 过渡
叶子与海的博客
09-30 1105
为什么要使用精灵图 当用户访问一个网站时，浏览器会向服务器发送一系列请求，比如说网页上的每张图像都需要经过一次请求才能最终展示给用户。 然而，一个网页中往往包含大量的图像资源（例如在页面中展示的图片、网页的背景图像以及一些装饰性的图像等），这就会导致浏览器频繁的请求服务器，大大降低网页的加载速度。为了有效的减少请求服务器的次数，提高页面加载的速度，就出现了 CSS Sprites 技术，也被称为精灵技术。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值