CSS Sprites如何使用重复背景日期

   之前在用到CSS Sprites的时候常常会遇到一个问题,如果遇到需要重复填充背景的情况该如何解决?

  一般解决方法是:如果是横向,把图片设置为通栏的,便可以repeat-x。纵向的采取不重复方法,取一个“足够长的高度”。但是这样也会带来一个问题,不利于控制背景图片的大小及尺寸,和图片的易维护性。后来还是老老实实的把需要平铺的图单独放出来。

  不知道还有没有更理想的解决方法。

时间: 2016-12-18

CSS Sprites如何使用重复背景日期的相关文章

CSS高级技巧:CSS Sprites

上一篇CSS教程文章:CSS高级技巧:圆角矩形 网页教学网 CSS Sprites, 利用CSS background-position 进行背景绝对定位, 减少HTTP请求, 加速网页显示, 解决图片载入闪动问题的技巧. 网页教学网 CSS Sprites最适合用来做的, 恩, 比如: 清单导航的CSS鼠标翻转效果 大量小图标集中的应用 (FckEditor) ...很多很多,多的想不出来了. 实现原理简单地说就是控制容器的大小, 然后利用background-repeat, backgrou

css如何在垂直方向重复背景图像 css实例

css如何在垂直方向重复背景图像 css实例

网页提速之:利用css sprites减少图片请求

在高举"用户体验"为中心的网络时代,你是否因为打开网页速度太慢而关闭网页呢?相信很多人的答案都是肯定的.在高速的网络时代,千万不要挑战广东网民的耐心,不然只会导致网民远离你的网站而去. 网页提速有很多的方法,其中一条就是减少http请求.每一个网站都会用到图片,当一个网站有10张单独的图片,就意味着在浏览网站时会向服务器提出10次http请求来加载图片.下面为大家介绍减少图片请求的方法. css sprites:网站前端开发者大多称之为"css精灵",通俗的理解就是

网页提速:利用css sprites减少图片请求

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 在高举"用户体验"为中心的网络时代,你是否因为打开网页速度太慢而关闭网页呢?相信很多人的答案都是肯定的.在高速的网络时代,千万不要挑战广东网民的耐心,不然只会导致网民远离你的网站而去. 网页提速有很多的方法,其中一条就是减少http请求.每一个网站都会用到图片,当一个网站有10张单独的图片,就意味着在浏览网站时会向服务器提

css sprites方法减少图片请求来提高加载速度

我记得雅虎的提高网站加载速度的16条军规中有一条是尽可能的减少http请求数来提高网页加载速度.于是,诞生了使用css sprites方法减少图片请求. css sprites:网站前端开发者大多称之为"css精灵",通俗的理解就是:将多张小图片合成为一张大图片,减少http请求次数而达到网页提速.下面以淘宝网为例子,为大家讲解下css sprites是如何实现的.如我们要在网页上显示"今日淘宝活动"这个图片.   实现代码: <div style="

利用css sprites减少图片请求

css sprites:网站前端开发者大多称之为"css精灵",通俗的理解就是:将多张小图片合成为一张大图片,减少http请求次数而达到网页提速.下面以淘宝网为例子,为大家讲解下css sprites是如何实现的.如我们要在网页上显示"今日淘宝活动"这个图片.   实现代码:         <div style="width:107px; height:134px; background:url(sprites.gif) no-repeat -13

CSS Sprites+CSS3 Icon Font

      CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问 该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.根据具体图标在大图上的位置,给背景定位.       CSS Sprites加速的关键,不是降低质量,而是减少个数.       做成Sprites的很大的原因是图片流量大,想象一下,如果将一些小图片做成字体模式进行显示,会不会很神奇呢?随着CSS3对字体样式的不断丰富,

CSS Sprites技术

核心提示:随着Web设计向着精致.巧妙的方向发展,设计师们开始考虑使用非Javascript的方 式制作鼠标滑过.悬停菜单的效果,这时CSS Sprite应运而生. CSS Sprites简介 通常被意译为"CSS图像拼合"或"CSS贴图定位".CSS Sprites并不是一门新技术,目前它已经在网页开发中发展得较为成熟,阿里巴巴各子公司的网页中到处都可发现css sprites 的影子.但CSS Sprites并不是什么金科玉律,但在很多情况下,它有着一定的优势,

CSS网页设计中使用背景图片须注意路径问题

css|背景图片|设计|网页|网页设计|问题 网页设计技巧文章,CSS网页设计中使用背景图片须注意路径问题. 在传统的表格布局中,背景图片是直接应用于表格的,一般情况下CSS的background-image属性使用非常少,或者说根本就不使用.应用CSS网页布局,实现内容与表现.行为相分离,作为页面框架.装饰等图片我们就直接剥离到CSS文件中,通过CSS进行定义. 我们通常用link的方法直接引用一个CSS文件到HTML(或其它活动文档)文件中.我们会发现有时候我们的图片无法显示了.此时,请查看