我有一个精灵图像设置为我页面上元素的背景,但是如何找到正确的偏移量以便我可以在屏幕上看到它？
我目前正在开发一个大型的,流量很大的Ruby on Rails网站,为了减少我们的页面加载时间,我们正在考虑精简我们的背景图像.似乎有很多工具,但许多工具处于dev的早期阶段,许多工具不支持我们需要的一些功能.
对我们很重要的功能:
如果它是用Ruby编写的,那将是一个奖励,但只要它可以与rake/cap设置集成就不是必需的.
有没有适合大多数(全部？)这些标准的css sprite工具？
我最近建立了一个网站,并决定创建按钮,用CSS3点击,非常酷.
但是真的有理由在精灵上使用CSS3,因为只有现代浏览器显示CSS3按钮吗？
客户问我这个问题,而我所能想到的只是较少的http请求,所以加载会稍快一些.从客户的角度来看,我可以看到这是一个非常好的一周回答.
有更好的理由吗？
或者是否有一个后备方法可以移动精灵背景位置,或更改渐变并在悬停/焦点上添加框阴影？
写这篇文章让我想知道现代化能否应对挑战......
我正在研究一些使用css sprites的现有代码.有大图像,用于显示所有图像.
它基本上是一个Ul和li元素.每个li元素使用此图像并使用背景位置.
我完全理解css sprites,它的性能更好.但唯一不明确的是为什么x和y位置以负边距开始.精灵中的大多数图像都是通过使用类似的东西来重新获得的
-540px -30px like this
我正在浏览器上观看该图像并且它显示正确,并且它们应该正确0,0.
我在这里错过了什么
几天前,我看到一个网站,其中书面文字有背景图像.
是否已经可以使用CSS将背景图像转换为文本？
我不希望文本背后有背景图片.我不知道这样做.:(
谢谢gago!
我正在尝试background-position在图像精灵中使用具有百分比的属性.它似乎没有工作,即它不会移动背景图像.
你可以在这里看到一个例子:http://jsfiddle.net/3UQYg/3/
当我使用像素时,图像确实会发生变化:请参见http://jsfiddle.net/3UQYg/2/.
我究竟做错了什么？!
我希望将jQuery图标添加到另一个由另一个插件(jquery.tablesorter.js)添加ui-icon-triangle-1-n的.headerSortUp类中,特别是我希望将该图标添加到该类中tablesorter.
我正在尝试添加以下类但不能为我的生活如何为它制定一个精灵.
table.sortable thead tr .headerSortUp {
cursor: pointer;
background-position: center right;
background-repeat: no-repeat;
background-size: 16px 16px;
background: url(jquery-ui/css/smoothness/images/ui-icons_222222_256x240.png) 0 -16px;
}
我之前没有使用CSS精灵,所以我不完全确定如何做到这一点.
我看到的情况是我只想要显示背景图像的一部分,但我希望它位于文本的右侧中心并且不重复.
不知道我在这里做错了什么,但我已经尝试在相关的w3schools页面上关注这个例子,但无济于事.所以这就是我到目前为止所拥有的:
我的索引页面上有四个图像,名为index1.png,index2.png等.我将它们组合成一个png,简单地就是index.png.那是我的精灵形象.我还有一个1x1透明图像,它是HTML中每个图像的占位符.这是图像代码:
<img class="index1" src="Images/trans.png" alt="alt" title="title" width="40%" />
而CSS:
img.index1 {
width:258px;
height:300px;
background:url(Images/index.png) 0px 0px;
}
测试页面,我得到的只是一个调整大小的透明图像.我想要显示的图像没有显示出来.
编辑:解决了.我是个白痴,忘记在我的CSS中找到一个目录,因为我的CSS位于根目录下的一个文件夹中.正确的道路是"../Images"
我正在尝试CSS使用精灵来动画我的风险矩阵...它在Firefox和Chrome中运行得很好,但图像不会出现在IE中......
代码在下面,不想在这里粘贴整个东西,但摘录显示了模式:
<dl id="rmMap4x4">
<dd id="m4p4s1">
<a onclick="setDropDownListValues(4,1,3,4)" onmouseover="setDropDownListValues(4,1,-1,4)">
</a>
</dd>
<dd id="m4p3s1">
<a onclick="setDropDownListValues(3,1,2,4)" onmouseover="setDropDownListValues(3,1,-1,4)">
</a>
</dd>
...
</dl>
CSS:
dl#rmMap4x4
{
background: url(/images/RiskMatrix_4x4.png) no-repeat scroll left top;
height: 400px;
margin: 0pt;
padding: 0pt;
position: relative;
width: 400px;
}
/*column 1*/
dd#m4p4s1 a
{
top: 99px;
left: 99px;
}
dd#m4p4s1 a:hover
{
position: absolute;
background: url(/images/RiskMatrix_4x4.png) -98px -500px no-repeat;
top: 100px;
left: 99px;
}
dd#m4p3s1 a
{
top: 149px;
left: 99px;
}
dd#m4p3s1 a:hover
{
position: absolute;
background: url(/images/RiskMatrix_4x4.png) …我昨天提出这个问题:背景重复在精灵图像中平铺bgImage？
因此,长期不可能重复精灵图像内部的背景,
创建精灵时最好的*策略是什么？
我的意思是,选择:
*)当我说最好的意思是最可访问/可用/性能