标签: css-sprites
无法让CSS Sprite工作......我做错了什么？
我正在使用CSS Sprite Generator为我正在处理的网页创建精灵,但它似乎不起作用,我不知道为什么......我猜它是显而易见的但是......!
所以,我拿起3张图片,压缩,生成了PNG文件(我查看结果看起来很好),然后我得到了以下css类:
.sprite-welcom1 { background-position: 0 -30px; }
.sprite-welcom3 { background-position: 0 -109px; }
.sprite-3 { background-position: 0 -188px; }
所以这是我正在测试的HTML,由于某种原因,我得到的是一个很好的空白页面:
<html>
<head>
<style>
.sprite-welcom1 { background-position: 0 -30px; }
.sprite-welcom3 { background-position: 0 -109px; }
.sprite-3 { background-position: 0 -188px; }
.sprite-bg {
background: url(csg-495a902b04181.png) no-repeat top left;
}
</style>
</head>
<body>
<div class="sprite-bg sprite-3"></div>
</body>
</html>
有小费吗？
推荐指数
解决办法
查看次数
如何制作背景图像以调整其包含元素的大小？
检查此站点中主要选项卡的圆角这些是宽度为440px的背景图像,仍然可以调整为包含元素而不会丢失圆角边缘.
推荐指数
解决办法
查看次数
刚注意到Twitter上的`<i />`标签,他们是否做到了？
Twitter似乎正在使用<i/>标签来显示来自css精灵的图标.他们只是构成了那个标签,还是我从未听说过的HTML？
无论如何都是绝妙的主意:)
推荐指数
解决办法
查看次数
CSS Sprite垂直重复问题
我想在我的webapp中包含css sprites.问题是我在精灵图像中垂直排列了我的网站背景.现在,精灵的一部分需要垂直重复.
我正在尝试以下代码......
#page-wrapper {
margin: 0px auto;
background-image: url(../images/background.png);
height: 100%;
width: 1000px;
}
#page-wrapper #content {
background-position: 0px -80px;
background-repeat: repeat-y;
height: 1px;
}
我对内容类的height属性感到困惑.我应该如何定义我想重复的部分的高度和div的高度(#content)？
关心维克拉姆
推荐指数
解决办法
查看次数
为什么我的背景图像在IE7中无法正常显示？
问题的屏幕截图:这里
网页问题:http://cure.org
违规浏览器:Internet Explorer 7
您将从屏幕截图中注意到,或者如果您在IE7中查看此站点,则背景图像不会显示内容div(#modal-inner-content).奇怪的是,图像显示在使用它的其他div中(因为它是一个精灵,我在#modal-top-border和#modal-btm-border使用相同的图像).
在所有其他浏览器中,它显示正常,甚至在IE8中.我似乎无法找到我可能正在使用的IE规则(或缺少)IE7令人窒息.
注意:要获取模态屏幕,只需单击页面顶部横幅上的链接,即"登录您的CURE帐户"
推荐指数
解决办法
查看次数
为什么jQuery spritely动画在第二个mouseenter上播放额外的帧？
我正在使用CSS sprites和jQuery插件spritely.
我有一个超级马里奥图像,当翻过来时,我想要动画播放.当你将鼠标从超级马里奥(这是一个<div>元素)移开时,我希望动画可以反向播放到它开始的原始位置.
这是我到目前为止:
<!DOCTYPE html>
<html>
<head>
<title>Mario Planet Spritely Nav</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="jquery.spritely-0.5.js"></script>
<script>
$(document).ready(function() {
$('#mario').hover(
function() {
$('#mario').sprite({
fps: 2,
no_of_frames: 6,
play_frames: 6
});
},
function() {
$('#mario').sprite({
fps: 2,
no_of_frames: 6,
play_frames: 5,
rewind: true
});
}
);
});
</script>
<style>
#mario {
position: absolute;
width: 40px;
height: 52px;
background: transparent url(mh.png);
cursor: pointer;
}
</style>
</head>
<body>
<div id="mario"></div>
</body>
</html>
我的fps故意慢,所以我可以试着弄清楚这里发生了什么.出于某种原因,第一个悬停和鼠标移动工作很棒.但是,在第二次悬停期间,发生了一些奇怪的事情.它似乎发挥了额外的框架.我不明白为什么.
这是我的mh.png图片(我没有当前的网络服务器来显示现场演示):
你们有没有想过为什么会这样？
谢谢.
推荐指数
解决办法
查看次数
如何使用一个大图像并将其拆分成网站的小块？
所以我看到一个方法,几个人似乎在他们有一个大图像(如果你愿意的话,主模板图像)的地方使用,并且在加载图像之后,有某种脚本或编码可以隔离单个部分图像和仅使用按钮等元素的较小部分.Facebook上的Words With Friends上的字母拼贴就是这种情况.我不是在谈论如何使用Photoshop来分隔它们.我希望有一个关于这个问题的网页,希望有一些教程或例子.我正在寻找可以用HTML,CSS或JavaScript做的事情.甚至是jQuery.
抱歉,我无法提供任何代码,因为这就是我所追求的,而且我也不知道这个方法究竟是什么.
推荐指数
解决办法
查看次数
Sprites针对视网膜显示进行了优化
我正在建立一个响应式网站,所以我一直在阅读有关移动设备和iphone上的CSS精灵.我发现这篇文章,我认为这是正确的技术,但解释可能会更好.我最终得到了这个:
有人能告诉我它在iphone上是否正常？我不确定那50%.还有,有没有人有更好的文章？
推荐指数
解决办法
查看次数
从罗盘精灵获取图像宽度和高度
从罗盘生成精灵时,我无法获得图像的宽度和高度.我正在使用Scout进行实时监控并已配置我的图像文件夹.我有我想要在一个名为common的文件夹中进行sprite的图像.
这是我的代码
@import "common/*.png";
.facebook { @include common-sprite(facebook); }
这可以工作并生成背景位置,但我想获得宽度和高度.
任何都会很棒!
推荐指数
解决办法
查看次数
使用@import时可以参考Compass sprite map
如果我使用以下内容生成精灵映射:
@import "ui-icons/*.png";
如何获取已创建的精灵映射的引用.我想把它传递给sprite-position($map)函数.
推荐指数
解决办法
查看次数
标签 统计
css-sprites ×10
css ×7
html ×4
compass-sass ×2
javascript ×2
background ×1
image ×1
iphone ×1
jquery ×1
sass ×1
sprite ×1
twitter ×1