标签: css-sprites
使用CSS Sprites时边框呈现
我正在尝试使用CSS sprites来减少页面上的HTTP请求数量.我希望这些图像无边框渲染.
我可以告诉我已经正确配置了CSS,但我遇到了下面的渲染问题(注意:Google徽标是故意剪辑的):
如您所见,所有浏览器仍然呈现边框.此外,IE和FireFox也会渲染"断开链接"类型的图标.
此示例中使用的HTML是:
<html>
<head>
<style>
img {border:none}
img.css_sprite { background:url("http://www.google.com/images/nav_logo29.png") -20px -10px; height:24px; width:100px; border:none;}
</style>
</head>
<body>
<img class="css_sprite"/>
</body>
</html>
谁能告诉我这里我做错了什么？我敢肯定它一定很简单.提前致谢.
推荐指数
解决办法
查看次数
css:nth-child随机跳过列表项
在我试图自己解决问题几天后,我在这里发帖.我有一个无序列表,其列表项包含几个东西,包括我用来显示来自精灵的图像的div.
这是html:
<ul class="upperList clearfix">
<li>
<h3>Kit détecteur extérieur images</h3>
<p></p>
<div class="extrasLiBg"></div>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim …推荐指数
解决办法
查看次数
CSS Sprites仍在提出新请求
我正在使用CSS sprites但是当我将鼠标悬停在它上面时,它会再次请求同一图像并导致闪烁.知道为什么要提出2个请求吗？这是我的代码:
.btn-red-lrg .left {background:url(../images/site-sprite.png) no-repeat 0px 0px transparent;width: 9px;}
.btn-red-lrg:hover .left {background:url(../images/site-sprite.png) no-repeat 0px -37px transparent;width: 9px;}
推荐指数
解决办法
查看次数
CSS Sprites Bottom重复
你可以在底部重复一个精灵背景,我希望精灵设置在div底部的背景.我有这个:
.statistics-wrap {
margin-top: 10px;
background: url(../img/bg-sprite.png) repeat-x 0 -306px bottom;
overflow: hidden;
border: 1px #BEE4EA solid;
border-radius: 5px;
-moz-border-radius: 5px;
padding: 10px;
}
它似乎没有出现,如果我删除底部它会出现,但它设置在div的顶部水平重复的背景,我希望它在底部重复.
可能吗？
推荐指数
解决办法
查看次数
CSS Sprite问题:水平背景位置
我在这里看这个精灵教程.完成的CSS sprite结果就在这里.这是整个工作代码:
#skyline {
width: 400px;
height: 200px;
background: url(test-3.jpg);
margin: 10px auto; padding: 0;
position: relative;
}
#skyline li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}
#skyline li, #skyline a {height: 200px; display: block;}
#panel1b {left: 0; width: 95px;}
#panel2b {left: 96px; width: 75px;}
#panel3b {left: 172px; width: 110px;}
#panel4b {left: 283px; width: 117px;}
#panel1b a:hover {background: transparent url(test-3.jpg) 0 -200px no-repeat;}
#panel2b a:hover {background: transparent url(test-3.jpg) -96px -200px no-repeat;} …推荐指数
解决办法
查看次数
精灵仅部分显示
我试图为我的asp.net主页底部制作一个精灵图像,以减少http请求的数量.我看了所有的编码,找不到任何错误.这是图像:
但由于某种原因,我的谷歌+图像没有出现; 它只显示5个社交媒体按钮中的4个.这是jsfiddle,它也没有显示谷歌+按钮:
感谢任何能提供这方面指导的人!
SE希望我在这里包含代码,尽管它是在小提琴上.但无论如何,这是我在样式表中的内容:
.homepage{
width:23px;
height:23px;
background-image: url(http://www.ussvision.com/images/sprite-homepage.jpg);
background-repeat:no-repeat;
}
.fbook{
background-position: 0px 0px;
}
.twit{
background-position: -25px 0px;
}
.yt{
background-position: -50px 0px;
}
.goog{
background-position: -103px 0px;
}
.linked{
background-position: -150px 0px;
}
推荐指数
解决办法
查看次数
Symfony2和Assetic - 我的CSS中引用的图像将无法加载
我有一个我正在尝试使用的CSS精灵表,但我的CSS文件无法"看到"图像.我按照这里提供的答案无济于事.我的捆绑结构是:
src/
vendor/
project/
bundle/
Resources/
public/
css/
normalize.css
static.css
images/
sprites.jpg
我已经完成了:
$ app/console assets:install
Installing assets using the hard copy option
Installing assets for Symfony\Bundle\FrameworkBundle into web/bundles/framework
Installing assets for MajorProductions\SewingDiva\SiteBundle into web/bundles/majorproductionssewingdivasite
Installing assets for Sensio\Bundle\DistributionBundle into web/bundles/sensiodistribution
和:
$ app/console assetic:dump
Dumping all dev assets.
Debug mode is on.
22:19:13 [file+] /home/kevin/www/diva/app/../web/css/06758be.css
22:19:13 [file+] /home/kevin/www/diva/app/../web/css/06758be_part_1_normalize_1.css
22:19:13 [file+] /home/kevin/www/diva/app/../web/css/06758be_part_1_static_2.css
不知道还能做什么......
推荐指数
解决办法
查看次数
css精灵故障
我有一堆图像,我已合并到一个png中.我试图使用这些图像来制作CSS精灵类.
<style>
img.plusOne
{
width:50px;
height:50px;
background:url(acknowledgement.png) 0 0;
}
</style>
<body>
<img class="plusOne" src="acknowledgement.png" width="1" height="1" />
</body>
而不是在png中显示50px乘50px的第一个图标,发生的是整个png文件被挤压成50 x 50的图标.
推荐指数
解决办法
查看次数
我如何使用CSS精灵
我有一个精灵,我想用来定义一个类而不是一个id:
我想使用白色显示扩展选项,使用黑色显示扩展状态.对于非扩展状态,我有一个类,sprite-right并希望sprite-expanded用于扩展状态.谁能引导我通过这个？我忘了粘贴我做的事......呃!
sprite-right
{
overflow:hidden;
width:16px;
height:20px;
cursor:pointer;
background:transparent no-repeat 0 0;
background-image:url('../images/arrows.gif');
}
推荐指数
解决办法
查看次数
标签 统计
css ×9
css-sprites ×9
html ×4
performance ×2
stylesheet ×2
assetic ×1
background ×1
sprite ×1
symfony ×1