css sprite与background-size结合实现背景图片等比缩放

实际开发中，因为要兼容不同分辨率设备我们的sprite图片可能需要不同的尺寸，比如下面图片我们要用“活动车辆”这个标签，分别需要原图大小和缩小一半之后的图片

如果是单独的图片很好处理，但我们这是一个css sprite处理起来就麻烦一点

我们用到了background-size属性

原图中“活动车辆”的大小是44px*30px,background-position是0px -20px

缩小一半变为22px*15px;background-position是0px -10px

具体写法为：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.img{width:44px;height:30px;background:url("image/sprite.png") 0 -20px no-repeat;}.img1{width:22px;height:15px;background:url("image/sprite.png") 0 -10px no-repeat; background-size:22px auto;}</style>
</head>
<body>
<div class="img"></div>
<div class="img1"></div>
</body>
</html>

img就是原图大小

img1就是缩小一半之后的大小

=============================================================

那么为什么这么写呢？

background-size是用来设置背景图像的尺寸的，即高度和宽度，第一个值设置宽度，第二个值设置高度

整个css sprite原图的大小是44*205，缩小一半之后是22*102，如果background-size用数值来设置可以设为background-size:22px 102px;这两个值当中有一个设置为auto也可以。

如果想用百分比设置background-size那我们需要注意，百分比指的是以父元素为基准

.img2{width:44px;height:15px;background:url("image/sprite.png") 0 -10px no-repeat; background-size:50% auto;}

注意img2的宽度为44px，这样写就ok了

css sprite与background-size结合实现背景图片等比缩放相关推荐

使用background 的url 引入背景图片失效的问题
使用background 的url 引入背景图片失效的问题清楚相对路径和绝对路清楚相对路径和绝对路 / 表示的是根目录 ./表示的是当前目录 . . /表示的是上一级目录同理. . /. . / ...
YDOOK : CSS div 设置背景图片大小自动缩放
YDOOK : CSS div 设置背景图片大小自动缩放设置示例: 选择器{width:100%;height:100%;background-repeat:no-repeat:background ...
HTML5+CSS3-边框背景图、多背景图、CSS选择器、网络字体、边框背景图片、过渡、放大、旋转
边框背景图片 1. background-origin:设置背景图片的起始原点 background-origin:border-box;------背景图片从边框开始显示 background-o ...
5.前端CSS之基本属性(长宽,字体,文体,背景图片,阴影,border画圆,display)
1.块儿标签长宽height,width块儿标签可以设置长宽,设置长宽后依然独占一行 h1-h6,p,div行内标签无法设置长宽写了也不会生效 i,u,s,b span2.字体样式:font-fa ...
css 全屏显示一张图片_css3背景图片全屏显示的例子
背景图片全屏这个功能只需要定义重复即可解决了当然这个是有一些技巧了,下面我们就来看一篇关于css3背景图片全屏显示例子了,具体的如下所示. 如何用css背景图片拉伸以及100% 满屏显示呢?这个问题 ...
web前端学习day_02:CSS:三种使用方式/选择器/颜色/背景图片/查看样式/文本/元素显示方式/盒子模型/定位方式/行内对齐/显示层级/防溢出
CSS : Cascading Style Sheet 层叠样式表. 作用: 美化页面 CSS 如何在html页面中添加css样式代码?总共有三种方式: 1.选择器 2.选择器练习: 3.颜色赋值 4 ...
用css和js的的方法打印背景图片
在项目中,当要实现将前端背景进行打印的时候,当我们点击打印时,可能会出现如下情景(如图所示): 即要勾选背景图片的时候才能够将背景进行打印,对于客户端来说显然是不友好的 (不排除部分用户并不知道在哪进 ...
IDEA插件系列（8）：Background Image Plus设置背景图片
0. 目录 1. 插件介绍 2. 安装方式 3. 使用方法 3.1 设置背景图片 3.2 清除背景图片设置 3.3 设置随机图片 1. 插件介绍将编辑器背景设置为文件夹中的随机图片. 2. 安装方式 ...
html背景图适应div_体验css+div 之三种使网站背景图片自动适应浏览器大小的方法...
不管你怎么变化浏览器窗口大小,背景图始终会自动调节大小. 1 . 第一次方法: 我第一个想法是需要使用一个 css 背景图,如果这张图够大,就能填充整个屏幕.当浏览器窗口大小没有图片大时,它将自动隐藏 ...

css sprite与background-size结合实现背景图片等比缩放

css sprite与background-size结合实现背景图片等比缩放相关推荐

最新文章

热门文章