标签: css-sprites
浏览器/ CSS规范中的最大图像尺寸？
我想显示一个包含大约6000个小图像缩略图的页面(每个40x40).为了避免发出6000个HTTP请求,我正在探索CSS精灵,即将所有这些缩略图连接成一个长条带并使用CSS来裁剪所需的图像.不幸的是,我发现JPEG文件在任何一个维度上都不能超过65500像素.警惕Web堆栈中的进一步限制,我想知道:以下任何一种都无法应对尺寸为40x240000的图像吗？
- IE浏览器
- 歌剧
- WebKit的
- 任何CSS规范
- 任何HTML规范
- PNG规范
编辑:这样做的目的只是一次显示整个图像集,要求用户最多必须滚动.我希望"微缩略图"流入现有的CSS布局,所以我不能只使用大的矩形图像.我不希望用户必须点击多个页面才能看到所有内容.像素总数不是很大 - 只有2560x1600显示器的两倍.所有微缩略图的总文件大小只有几兆字节.假设每个图像都在浏览器的内存中未经压缩处理,每个像素占用8个字节的存储空间(RGBA加上100%的开销软糖因子),我们正在谈论数百兆字节的RAM使用率; 在2010年的专业申请并非不合理.
推荐指数
解决办法
查看次数
如何将CDN加速技术应用于图标？
通常的做法是使用CDN缓存javascript,css,font等等...但是这似乎并没有扩展到图标到相同的程度(可能因为每个网站都喜欢具有独特的外观和感觉？)
是否有广泛使用的CDN托管的图标集,这些图标集通常足以从CDN托管中提供显着的速度提升,并且可能已经使用该CDN从另一个站点预先缓存.
一个例子是:http: //cdnjs.cloudflare.com,其内容可浏览https://github.com/cdnjs/cdnjs/tree/master
它主机所在的一些图标集:
/ajax/libs/twitter-bootstrap/2.3.2/img/glyphicons-halflings.png
/ajax/libs/fatcow-icons/...
/ajax/libs/foundicons/3.0.0/svgs/...
/ajax/libs/aui/5.4.0/aui/css/icons/...
/ajax/libs/topcoat-icons/0.2.0/svg/...
/ajax/libs/jqueryui/1.10.3/css/base/images/...
*jqueryui is also hosted on ajax.googleapis.com and others but is a limited set
和bootstrap halflings图标集一样:
http://netdna.bootstrapcdn.com/bootswatch/2.3.2/img/glyphicons-halflings.png
http://ajax.aspnetcdn.com/ajax/bootstrap/2.3.2/img/glyphicons-halflings.png
http://www.bootstrapcdn.com/twitter-bootstrap/2.3.1/img/glyphicons-halflings.png
推荐指数
解决办法
查看次数
CSS:使用带有css伪类的图像精灵:before和:after
我以前从未尝试过.我创建了一个包含两个图标的图像精灵.每个图标宽26px.所以精灵是26x52px.
我有一个div.something或div.anything元素.根据它所在的课程,我想在左侧或右侧添加角帽.
因此,我正在定位.element相对,将:before伪类应用于img并将其置于绝对位置,高度和宽度为26px,因此只有精灵的一个图标适合.我还应用"overflow:hidden"以便隐藏精灵上的第二个图标.
.element {
position:relative;
}
.element:before{
content: url("../images/sprite.png");
position: absolute;
height:26px;
width:26px;
overflow:hidden;
}
.something .element:before {
top: -2px;
left: -2px;
}
anything .element:before {
top: -28px;
right: -2px;
}
这适用于左角,我使用精灵中的第一个顶部图标.但是现在我想知道如何只在精灵中显示"任何.element"中的第二个图标.
所以实际上"掩码"应该定位在-2px,-2px但是里面的精灵img应该从-26px开始,所以显示第二个图标.
这可能与我现在这样做的方式有关吗？
推荐指数
解决办法
查看次数
IE9/8/7 css精灵位置滑动问题
我想要css精灵(精灵图像总宽度:45px和总高度:15px由三个图像组成)但IE9/8/7中存在问题.链接和悬停工作,但单击按钮(活动)精灵图像滑动到左1px.仅针对IE 9/8/7的问题.如何解决这个问题？
CSS:
body{
margin:0;
padding:0;
}
.button{
background:url(sprite-image.png) no-repeat 0 0;
width:15px;
height:15px;
cursor:pointer;
}
.button:hover{
background:url(sprite-image.png) no-repeat -15px 0;
}
.button:active{
background:url(sprite-image.png) no-repeat -30px 0;
}
.cont{
width:200px;
height:200px;
float:left;
margin:50px 0 0 100px;
}
HTML:
<body>
<div class="cont">
<div class="button"> </div>
</div>
</body>
"链接","悬停"和"活跃"FF,Chrome,Safari,Opera就是这样;
但IE 9/8/7活跃看起来像这样;
我将上面的图像具体化,使其看起来更好.我的精灵形象;
css internet-explorer css-sprites background-image internet-explorer-8
推荐指数
解决办法
查看次数
在Web应用程序中使用CSS Sprites有什么好处？
我正在一个流量相当大的网站上工作,我正在研究使用CSS精灵来减少设计中的图像负载数量.
除了减少传输数据量之外,使用CSS sprite有什么好处吗？你真的节省了多少空间？是否存在使用精灵变得对网站有价值的门槛？
更新:感谢您的回复.他们显然都经过深思熟虑,并提供了很好的资源来验证你的观点.我现在更有能力在我的网站设计中做出关于使用CSS sprites的明智决定.
推荐指数
解决办法
查看次数
图像精灵实际上比单独的图像效率更高吗？
我在两年前开始使用图像精灵,因为我看到Apple和Facebook这样的网站在他们的网站上使用它们.
毫无疑问,如果您下载一个60kb图像而不是三个20kb图像,加载页面会更快,但是,我最近被告知精灵虽然加载速度更快,但实际上客户端的内存消耗更多.
在我眼里:
- 精灵加载速度更快,占用带宽更少
- 从开发人员的角度来看,它们更易于维护,因为所有图形都在一个地方
但是,在我的同事眼中:
- 每次在页面上引用精灵时,图像都会在内存中创建,从而减慢客户端浏览器的速度
- 加载速度的差异不足以证明浏览器的内存使用量增加是合理的
- 互联网旨在以小数据包传输,因此加载较小的图像比加载较大的图像更好
这让我提出这个问题,精灵实际上是值得使用还是我的同事咆哮着错误的树？
推荐指数
解决办法
查看次数
CSS Sprite技术,css背景或img的剪辑
有两种图像精灵技术."经典"版本使用背景和背景位置css属性.(正如这里所描述的那样http://www.alistapart.com/articles/sprites)
"第二"版本使用图像标记及其剪辑css属性.(http://css-tricks.com/css-sprites-with-inline-images/)
我的问题是,使用"第二"版本比"经典"版本有优势吗？
谢谢,最好,Viktor
推荐指数
解决办法
查看次数
CSS Sprite-maps的高/宽范围是否有限制？
让我首先说明我意识到反对为大图像做CSS Sprites的论点.我甚至问了一个问题,为什么这可能被认为是一个坏主意(并添加了我自己的答案).现在我们已经有了这个话题......
我将要制作一个大的CSS Sprite-map.对于制作这个精灵图的过程,我应该知道精灵图像的高度和/或宽度存在什么(如果有的话)限制,以便浏览器正确处理它.
这个问题背后的最终原因是关于是否在网格或单行/列中布置精灵图像的争论.例如:4000 x 3000而不是400 x 30000是必要的还是有益的？
编辑:这里的关键点不是图像的大小,而是浏览器可以为精灵处理的大小.鉴于到目前为止缺乏细节,我正在开始生成单大列精灵.一旦完成,我会将我的经历细节作为答案发布.
推荐指数
解决办法
查看次数
CSS Sprites浏览器渲染
我们都知道CSS精灵图像非常适合减少请求量等等,但是浏览器的性能如何使用大图像作为背景渲染具有多个元素的页面？
推荐指数
解决办法
查看次数
在什么情况下使用HTTP/2单独加载图像比使用sprite和HTTP/1.1加载所有图像要慢？
HTTP/2使得可以复用连接,从而无需连接到服务器.通过单个连接,可以将许多单独的图像发送到客户端.这消除了将许多图像组合成一个并使用CSS将其分开的旧图像精灵图案.
我很好奇精灵在HTTP/2世界中是否真的更快.如果是这样,在什么情况下呢？
推荐指数
解决办法
查看次数
标签 统计
css-sprites ×10
css ×7
image ×3
sprite ×3
browser ×2
cdn ×1
css3 ×1
html ×1
icons ×1
memory ×1
performance ×1
pseudo-class ×1
web-traffic ×1