标签: css-sprites

我试图扩大css精灵像素艺术图像,并希望完全禁用抗锯齿/图像平滑.

根据这篇文章:缩放图像时禁用抗锯齿我尝试了以下css

image-rendering: optimizeSpeed;            
image-rendering: -moz-crisp-edges;         
image-rendering: -o-crisp-edges;           
image-rendering: -webkit-optimize-contrast; 
image-rendering: optimize-contrast;       
-ms-interpolation-mode: nearest-neighbor;   

它的工作方式与我想要的一样,但是在Chrome和IE浏览器中它有点帮助,但仍然会出现一些图像插值/平滑/抗锯齿.

我不想使用canvas元素,而只是坚持使用CSS背景图像sprite.

有没有办法在其他浏览器中实现与"-moz-crisp-edges"相同的结果？

我对 css 很陌生，我通常可以通过反复试验来解决问题，但这一个让我难住了。我正在使用精灵页面在主页上显示类别。

html 是

<div id="sprite2">
    <a style="display:inline-block" href="https://www.subscriptionboxaustralia.com/product-category/adults-sex-toy-subscription-boxes/"><div class="sprite2" id="adults-boxes"></div></a>
    <a style="display:inline-block" href="https://www.subscriptionboxaustralia.com/product-category/arts-crafts-creative-subscription-boxes/"><div class="sprite2" id="arts-boxes"></div></a>
    </div>

CSS 是

    .sprite2 {
    background-image: url(https://www.subscriptionboxaustralia.com/wp-content/themes/accesspress-store/images/Subscription-categories-spritesheet.png);
    background-repeat: no-repeat;
display:inline-block;

}

#adults-boxes {
    width: 425px;
    height: 49px;
    background-position: -15px -15px;
    margin-left: 120px
    }


#arts-boxes {
    width: 425px;
    height: 49px;
    background-position: -15px -94px;   
    margin-left: 70px
}

正如您所看到的，每个图像周围的边距是可点击的？我该如何解决这个问题，我已经阅读了大量帖子，但我似乎无法将这些概念应用到我自己的代码中。

www.subscriptionboxaustralia.com

**更新第一个给出的答案非常适合桌面，非常感谢！！！！现在唯一的问题是它抛弃了我的移动样式

@media (max-width: 480px) {
#adults-boxes {
    width: 425px;
    height: 49px;
    background-position: -15px -15px;
    transform: scale(.8);
    margin-left: -33px;}}

@media (min-width: 481px) {
#adults-boxes {
    width: 425px; …

我在css中得到了一个关于sprite的快速问题:如果我在css文件中包含两次相同的图像,我会发送两个HTTP请求吗？例如,如果我想从同一图标集图像加载两个不同的按钮:

.btn-1 {
    background:url('img/icons.png') 0 0;
}

.btn-2 {
    background:url('img/icons.png') 0 -60px;
}

还是有另一种方法只包括一次图像？

我正在基于本文的ASP.NET应用程序中实现CSS Sprites设置.

http://weblogs.asp.net/zowens/archive/2008/03/05/css-sprite-for-asp-net.aspx

在"获取SPRITE已经!"部分中.......作者说......

"唯一真正的缺点就是所有的图像都垂直排列.我不太确定这很重要,但大多数其他发生器都能够以某种方式将图像垂直和水平排列."

我敢肯定这必须是以前解决的问题,所以我的问题是,"鉴于一组矩形,你能以最佳的方式有效地铺设这些吗？" (我想它取决于我对最优的定义,但是最接近正方形作为开始.(虽然实际情况可能并非如此.))此外,您是否需要提前预测所有矩形或者可以这样做逐步？

我得到了一个PNG,其中编码了多个图像.如何使用HTML中的所有图像,默认情况下一个,鼠标使用另一个(我不想创建不同的图像和工作).

有什么例子吗？

我想知道这是否有点简单,但我只是在iPad上出现问题我的sprited图像.我有一个标签,我用一个精灵来显示一个星形图像(类似于gmail或picasa)来表示一个喜欢的.在计算机上的每个其他浏览器(包括safari)上,一切都很好.

问题出在iPad上,它显示的精灵数量超出应有的水平,看起来很奇怪.更奇怪的是,这个图像重复了几次,似乎并不一致.

这是专门针对iPad的某种缩放问题或视口设置问题吗？它让我发疯,而我所做的任何修复工作都会切断部分图像并破坏浏览器的正常外观.

这是我的意思的一个例子,因为我无法提出我目前正在处理的页面.在我过去曾经工作过的网站上,iPad上的查看选项看起来很奇怪:http://demo.qlikview.com/index.aspx？ section = Life 例如,"下载"查看选项在FEMA应用程序比在Kick It应用程序上所以它甚至看起来不一致.

任何帮助,将不胜感激.谢谢!

我正在尝试将放大镜作为输入元素的背景.放大镜图标是CSS精灵的一部分,如下所示:

为了定位它,我使用了以下属性:

#search-form input[type="text"] {
    background: url('../images/icons.png') no-repeat left center;
    background-position: 0px -30px;
    border: 1px solid #a9e2ff;
    padding: 3px;
    width: 200px;
    font-size: 1em;
    padding-left: 20px;
}

但背景仍然出现在输入框的顶部,而不是在垂直中间和左边对齐.我也尝试过:

background: url('../images/icons.png') no-repeat left middle;

但这也不起作用.

如果它很重要,虽然我猜它没有,这是我的表单标记:

<form action="/search" method="get" id="search-form">
    <input type="text" placeholder="Search..." name="s">
</form>

谢谢你的帮助.

我的css背景有一张精灵表,尺寸为2000x2000像素.适用于所有桌面浏览器,除了适用于iPhone的Safari,它根本无法渲染.

将尺寸降低到1000x1000使其呈现完美.(除了我现在错过精灵表四分之三的事实之外).

在背景图像的尺寸方面有任何限制吗？2000x2000并不是那么大.试图绕过重做大量css定位的工作.

此外,我正在使用媒体查询布局(最大宽度,而不是max-device-width).但我仍然使用相同的图形.

编辑:啊是的,它适用于Android设备就好了.

我的菜单如下:

<ul>
  <li><a href="#">First Item</a></li>
  <li><a href="#">Long Item</a></li>
  <li><a href="#">Very very short Item</a></li>
  <li><a href="#">Another Item</a></li>
  <li><a href="#">Last Item</a></li>
</ul>

我想在CSS中使用精灵图像作为背景.我希望图像以不同宽度的菜单项为中心.目前,对于第一项正确的CSS是:

background: url(images/sprite.png) no-repeat -20px -10px;

对于第二个:

background: url(images/sprite.png) no-repeat -24px -10px;

对于第三个:

background: url(images/sprite.png) no-repeat -32px -10px;

等等.我不知道每个元素的确切宽度,它可以随时改变.

我可以访问HTML结构,所以如果需要,我可以添加一些标签.在这种情况下,是否可以将背景图像居中？

我正在为我的项目使用Sprite图像.我们应该遵循横向还是纵向？我的意思是说并排(占据更多宽度)或一个再见(占据更多高度).

在精灵中添加图像是否有任何宽度/高度限制？是否包含任何装载概念？