CSS——精灵图与背景图片定位

精灵图产生背景: 1.网页上的每张图像都需要向服务器发送一次请求才能展现给用户.2.网页上的图像过多时,服务器就会频繁地接受和发送请求,大大降低页面的加载速度.为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(CSS Sprites) 精灵图的定义: 1.很多图片融合在一张图上,通过背景定位的方式将图标显示在每个盒子中. 2.背景定位的方式主要通过控制x和y轴的值. 精灵图使用技巧: 1.一般情况:直接一个盒子,里面的背景图片是精灵图,使用时注意x轴和y轴. 2…

移动端适配之雪碧图(sprite)背景图片定位

为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位.在web端由于是固定的大小与left .top,所以定位起来会比较准确.简单.但是在移动端就不一样了,各种手机的屏幕大小不一样,很难做到使用sprite图然后根据background-position来定位.所以普遍的做法都是使用单张图片,然后使用background-size: cover|100%|contain来控制背景图的大小.其实这样…

CSS背景图片定位

原文:CSS背景图片定位在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图片的定位就需要用到CSS中的background样式,如: div{ background-image: url("1234.png"); background-repeat: no-repeat; background-position: 0px -100px; } 属性解释: back…

CSS常用背景图片定位方法

CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会改变元素的层级关系,如果在多个地方使用,这样的层叠嵌套的关系会十分混乱. 先暂时抛弃那种方案,给大家分享几种CSS背景图片定位的方案. 整篇文章会按照如下思路: 1.无依赖的absolute定位 2.background-position扩展语法 3.background-origin定位 4.ca…

CSS 背景图像背景图片定位

背景图片定位 background-position属性可以给背景图片定位. background-position属性有两个值,第一个值是水平位置,第二个值是垂直位置.这两个值可以使用百分比来表示(50% 50% 表示垂直和水平都居中). 也可以使用下面的方式表示: left top left center left bottom center top center center center bottom right top rigth center right bottom 下面的代码演示…

课时102.CSS精灵图（掌握）

我们这节课来介绍一个和背景图片相关的东西,精灵图 1.设么是css精灵图? css精灵图是一种图像合成技术 2.css精灵图作用可以减少请求的次数,以及可以降低服务器处理压力 3.如何使用css精灵图 css的精灵图需要配合背景图片和背景定位来使用需要用到firework这个软件…

css精灵图使用

1. 精灵技术的使用 CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图,就需要使用CSS的background-image.background-repeat和background-position属性进行背景定位,其中最关键的是使用background-position属性精确地定位. 2. 制作精灵图 CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),那我们要做的,就…

background的属性和背景图片定位的实例

本文内容: 1.背景图片定位示例 2.background常用的属性值 3.background-repeat新增的round.space属性 4.background-size的属性值(着重介绍contain.cover) 5.background-origin属性值(borde-box.padding-box.content-box) 6.多背景图片示例背景图片定位(background-position)原理 A. 语法:Background-position:水平位置垂直位置 B.…

css精灵图&字体图标

精灵图为什么需要精灵图为了有效的减少服务器接收和发送请求的次数,提高页面的加载速度.出现了CSS精灵技术精灵图(sprites)的使用精灵技术主要针对背景图片.就是把多个小背景图片整合到一张大图片中. 这个大图片也称为sprites精灵图或者雪碧图移动背景图片位置,使用background-position 移动的距离就是这个目标图片的x和y坐标.注意网页中的坐标有所不同使用精灵图的时候需要精确侧脸,每个小背景图片的大小和位置字体图标主要用于显示网页中通用.常用的一些小图标精灵…

CSS精灵图与字体图标

CSS精灵图与字体图标 1. 精灵图当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户.然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度.为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术. 精灵图主要针对与小的背景图片使用.我们在网页中看到的一些小图片,比如下图中圈起来的部分当你去查看原图时,会发现显示出来的是这样的这就是精灵图的应用…

css网页中设置背景图片的方法详解

在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样注意:在HTML当中,要为某个对象加上背景色只有一种办法,那就是先做一个表格,在表格中设置完背景色,再把对象放进单元格.这样做比较麻烦,不但代码较多,还要为表格的大小和定位伤些脑筋.现在用CSS就可以轻松地直接搞定了,而且对象的范围很广,可以是一段文字,也可以只是一个单词或一个字母.例子:给部分文字加背景颜色…

css背景图片定位练习（一）

首先准备一张雪碧图,Like this 背景图片的定位方法有3种,比较常用的两种为关键字:background-position: top left; (top/bottom/cennter/left/right) 像素:background-position: 水平移动px 垂直移动px; 关键词: 其中关键字方法background-position: top left 和left top效果是一样的.(注意:如果您仅规定了一个关键词,那么第二个值将是"center".) 关于像…

CSS中背景图片定位方法

转自:http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 作者: 阮一峰日期: 2008年5月 7日 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-pos…

(转)HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-position: 0% 0%; 上面这三句语句,都将图片定位在背景的左上角,表面上看效果是…

HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-position: 0% 0%; 上面这三句语句,都将图片定位在背景的左上角,表面上看效果是一样的,实际上第三种定位机制与前两种完全不同. 前两种定位,都是将背景图片左上角的原点,放置在规定的位置.请看下面这张图…

css背景图片定位练习（二）： background-position的百分比

background-position:x y; 百分比定位并不能直观的看出来,需要通过计算. background-position百分比计算公式: (容器宽度—背景图片的宽度)*x%=xpx(容器高度—背景图片的高度)*y%=ypx 上节我们使用的图片也可以继续拿来做练习: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl…

CSS 中背景图片定位方法

三种: 关键字:background-position: top left; 像素:background-position: 0px 0px; 百分比:background-position: 0% 0%; 区别:前两种定位将背景图片左上角的原点放置在指定位置:第三种方式将图片本身的点(x%,y%)与背景区域的点(x%,y%)重合. 使用百分比设置的主要优势在于,当页面缩放的时候,背景图片也会跟着一起缩放.…

CSS精灵图(王者荣耀案例)

首先,我们应该知道引入精灵图的原因: 具体是因为,网页上面的每张图片都要经历一次请求才能展示给用户,小的图标频繁的请求服务器,降低页面的加载速度,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,因此,产生了css精灵技术. 其次,我们应该知道精灵图和图标字体(有文章介绍)在使用的过程中有哪些异同点: 同:能够缩小源文件的体积,减少http的请求,提高页面的性能异:图标字体具有矢量效果,放大缩小不失真,而且可以使用CSS任意更改图标字体的颜色:而精灵图的大小固定,放大缩小会失真,更…

css 精灵图的使用

精灵图的使用 1.给一个容器定义一个大小(宽高) 2.引入背景图 3.定位到自己你想要的图片位置例如: background-position: 0 0; background-position: -20px 0; background-position: 0 -20px; background-position: -20px -20px;…

CSS background-color 、image 背景图片

背景颜色 background-color 语法: background-color:<color> 默认值:transparent 透明适用于:所有元素继承性:无动画性:是计算值:指定值取值: <color>: 指定颜色. 说明: 设置或检索对象的背景颜色. 当同时定义了背景颜色和背景图像时,背景图像覆盖在背景颜色之上. 如果设置了 <' background-image '>,同时也建议设置 <' background-color '> 用于…

【CSS学习笔记】背景图片

直接看代码: background: blue; /*页面背景为蓝色,很简单的代码*/background-image:url(small.jpg); /*页面背景是名字叫small.jpg的图片*/background-repeat: no-repeat; /*水平方向显示图片repeat-x 竖直方向显示图片repeat-y 不重复图片no-repeat*/ background-attachment: fixed; /*在页面特别长有滚动条时,可以固定图片*/ 相关知识点: 1.背景图与背…

用css来写一个背景图片的切换

代码如下: <!DOCTYPE HTML> <htmllang="en-US"> <head> <meta charset="UTF-8"> <title>CSS3 Full Background Slider </title> <style type="text/css"> /*字体效果*/ @import url("http://www.w3cplu…

vue webpack打包后.css文件里面的背景图片路径错误解决方法

资源相对引用路径问题描述一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根路径,那么要解决这种问题,就得引用相对路径. 解决办法打开webpack.prod.conf.js 找到output:增加 publicPath: './', 即可,如图. 那么这样后,资源的引用路径就正确了. 当然在config文件夹下的index.js中修改 assetsPubl…

CSS hack前传——背景图片全屏

在之前的博客CSS hack中我有提到,一个问题的解决让我对CSS hack的态度从不屑一顾,到认真研究了实验一下,事情是这样的,最近产品发布,向来狂妄的我被一个bug纠缠住了,甚至丧气的表示我做不出来,说来也惭愧,难住我的并不是造火箭这样的难题,只是个背景图片... 前世今生最近为产品做了一个扁平化的新Theme,看起来很美观,公司的艺术家看后表示需要一张有深意的背景图片,发给我了放上去后一看艺术家就是艺术家,果真和Theme很搭而且让网站高端了很多(自我感脚),兴冲冲的就发布了上去,主要…

IE9以下通过css让html页面背景图片铺满整个屏幕

第一种方法不设为背景图片,通过css来控制样式,可兼容到IE6,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="author" content="chaozhang5"> <meta name="mail" content=&qu…

不用css样式表和背景图片实现圆角矩形，超简洁！

当网站页面的整体布局设计好后,接下来有很多细节的实现是很让人头疼的.其中之一就是圆角矩形的实现. 在网上看了很多圆角矩形的实现方法,基本有两种,一种是用纯css实现,不需要背景图片:另一种是用背景图像实现.但是,不管是哪一种,都有一个共同的缺点:需要使用很多代码来嵌套,而这些代码对搜索引擎来说毫无意义. 在<css cookbook>一书中介绍了一种实现圆角矩形十分简洁的方法,那就是用Nifty Corners Cube 先看一个简单的例子:http://www.sz137.com/sz137…

vue打包后CSS中引用的背景图片不显示问题

vue项目中,在css样式中引用了一张背景图片,开发环境下是可以正常显示,build之后背景图片不显示. 解决方法: 找到build/utils.js文件修改成为如下所示内容: 添加红框中的内容即可.…

2014辛星在读CSS第八节使用背景图片

这应该是系统CSS本教程的最后一节,为什么,由于本节.我觉得基础已经完成,接下来的就是无休止的战斗,战斗非常难用知识讲出来,通过积累,战斗经验.这些都不是说出来. 伟大,下来说一下用CSS加入背景图片的方式把.它在background属性中指定,能够用url("图片路径")的方式来指定背景图片,假设是repeat,则图片在横向和纵向上平铺.假设是no-repeat,则背景图像不会平铺,仅仅显示一次,假设是repeat-x.那么就在水平方向平铺.假设是repeat-y,则在竖直方向平铺.…

vue-cli || webpack 打包的时候css里面写的背景图片的路径出错问题

.bg width 100% position fixed left 0 top 0 height 100vh z-index -1 background url('~@/assets/imgs/bg9.jpg') center no-repeat // 这个背景图片 background-size cover filter blur(4px) 打包生成后的地址: .login .bg[data-v-c3a977bc] { width: 100%; position: fixed; left:;…

css文件如何使背景图片大小适应div的大小

对背景图片设置属性:background-size:cover;可以实现背景图片适应div的大小. background-size有3个属性: auto:当使用该属性的时候,背景图片将保持100% 的大小显示,不进行任何缩放.超过div的多余部分将被隐藏.当图片过小时,图片会自动平铺.这种属性通常用来做重复性的背景或者做半透明图片背景. 可以设置x和y的值,表示宽和高,设置宽度后,如果不设置高度,那么默认会是auto. cover:当使用该属性时,图片将被缩放至恰好能覆盖div,并且是等比例缩放…

【CSS——精灵图与背景图片定位】的更多相关文章