标签: css-sprites
CSS:使用.Less管理精灵图像
像使用Compass的SASS(在SCSS文件中),是否有一种方法(通过扩展或工具)直接从.Less管理Sprite？
推荐指数
解决办法
查看次数
如何剪辑元素的背景以仅显示图像的一部分？
有关说明,请查看以下图像.
第一个是我打算实现的目标.它是一个文本输入元素,有两个背景图像,每边一个.
第二个图像是包含我需要的图标的精灵图像.
现在我的问题是,是否可以剪切背景图像以仅显示图像的一部分？此外,是否可以使用多个背景？
第1张图片:
第二张图片:
推荐指数
解决办法
查看次数
CSS Sprites - 如何让Hover按钮处于压低状态
CSS Sprites(按钮)有三种不同的状态:
- 标准
- 徘徊
- 按下(活动)
目前"标准","悬停"和"按下"工作.问题是,"按下"仅在按住鼠标时保持按下状态.我希望"按下"或"活动"状态保持活动状态,直到再次单击它为止.有任何想法吗？CSS解决方案？JavaScript解决方案？
谢谢你的帮助,D
这是代码:
<html>
<style type="text/css">
a.button {
background-image: url('BUTTON SPRITES IMAGE');
width: 86px;
height: 130px;
display: block;
text-indent: -9999px;
}
a.micbutton:hover {
background-position: 0 -130px;
}
a.micbutton:active {
background-position: 0 -260px;
}
</style>
<a class="button" href="#" ></a>
</html>
推荐指数
解决办法
查看次数
如何让Bootstrap图标在深色背景上工作？
我正在使用Twitter的Bootstrap库的Bootswatch Cyborg主题.然而,Cyborg主题具有深色背景和浅色前景色,从Bootstrap默认值看为负面.图标集PNG采用浅色背景,不会显示在Cyborg主题中.是否为深色背景设置了相应的图标？我在Glyphicons的网站上找不到一个.是否有一个简单的技巧将图标变成负面颜色？
推荐指数
解决办法
查看次数
使用ASP.NET创建精灵图像
我遇到了一个重大的性能问题.问题是在我的一个网站上有一个调用大约180个图像的滑块.这180个图像中的每一个都是由客户端浏览器通过个人URL下载的.它们是GIF和jpg的混合物,我想将它们组合成一个单独的图像; 因为透明度不是问题,所以最好是jpg.图像存储在SQL数据库中,并通过MVC控制器显示.我想这个精灵也可以通过MVC控制器创建,而不是更传统的通用ashx处理程序.
我做了一些谷歌搜索,并发现斯科特汉塞尔曼的博客文章.该帖子解释了如何组合检查图像,并通常做我想做的事情.它写于2005年,所以我很好奇是否有更好的方法.我一直在另一个项目上使用ImageResizer.我听了Hanselman先生的播客,该播客与该项目的创始人讨论了如何使用IIS和.NET调整图像大小.我从那个播客和我的经验中收集到,.NET和IIS中的图像处理可能会变得奇怪.
以这种方式调整图像到sprite是一个好主意吗？我不想要一个精灵生成器,我想要一个有效的方法将.gif和jpg组合成一个可以用作精灵的单个图像.
推荐指数
解决办法
查看次数
CSS Sprites - 仅使用一个图像作为元素的一部分的背景
我使用CSS Sprite技术,背景图像看起来像这样:
图标的CSS代码:
div.icon {
background-color: transparent;
background-image: url("/images/icons.png");
background-position: 0 0;
background-repeat: no-repeat;
display: inline-block;
height: auto;
vertical-align: text-top;
width: auto;
}
div.icon:empty {
width:16px;
height:16px;
}
div.icon:not(:empty) {
padding-left:20px;
}
div.icon.attenuation {
background-position: 0 0;
}
我的图标可以像这样使用:
<div class="icon warning"></div>
我想在我的图标中添加一些文字,如:
<div class="icon warning">There is a warning on this page</div>
但问题是背景图像覆盖整个文本区域:
问题是:我如何只使用图像的一部分作为我元素的一部分的背景图像？
笔记:
- 设置
width为16pxfordiv.icon无济于事.
推荐指数
解决办法
查看次数
IMAGE MAPS和CSS SPRITES之间的区别
我找不到IMAGE MAPS和CSS SPRITES之间的明显区别.两者看起来都像将页面中的图像合并为一个？因此我们可以减少对服务器的多个请求.那真正的区别是什么？
推荐指数
解决办法
查看次数
为什么我用罗盘精灵得到了错误的道路
使用指南针当我试图创建一个精灵时,screen.css中主精灵图像的路径出错了,因为我无法看到图像.
我的scss代码是
@import "compass";
@import "spr/*.png";
h1 { @include spr-sprite("car"); height:50px; width:50px; }
我的css输出为精灵
.spr-sprite, h1 { background: url('/images/spr-sa37328aec0.png') no-repeat; }
h1 { background-position: 0 -147px;
height: 50px;
width: 50px;
overflow: hidden;
text-align: left;
}
你可以看到背景不应该开始,../而不是直接开始/images/.它造成了一个问题.我的图像文件夹路径
images
------spr
---*.png
sass
-----screen.scss
css
---screen.css
我的config.rb代码
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = …推荐指数
解决办法
查看次数
CSS背景位置
这里的小问题,我有一个精灵图像,其中包含具有正常和悬停效果的图标.
这是我现在拥有的css ..
.wi{
background-image:url(images/icons/small/wi.png);
background-repeat:no-repeat;
display:block;
overflow:hidden;
height:24px;
width:24px;
}
.wi-delete{background-position:0 0;}
.wi-edit{background-position:-24px 0;}
.wi-fullscreen{background-position:-48px 0;}
.wi-imageedit{background-position:-72px 0;}
.wi-download{background-position:-96px 0;}
.wi-tags{background-position:-130px 0;}
.wi-windowed{background-position:-154px 0;}
如您所见,图标的正常状态始终为背景位置Y = 0,因此悬停图像全部处于Y = -24px
我的图标的html是:
<div id="something" class="wi wi-delete"></div>
问题是:可以只更改Y位置,这样我可以为所有图标指定一个CSS行悬停状态,而不是每个图标都有一个css行？
就像是:
.wi:hover{
background-position: auto -24px;
}
代替
.wi-delete:hover{background-position:0 -24px;}
.wi-edit:hover{background-position:-24px -24px;}
..and so on..
推荐指数
解决办法
查看次数
css - 使用游标精灵
.fancybox-inner {
overflow: hidden;
background-color:#EEE;
cursor: //url to an independent cursor image
}
但是如果我的游标(3)都在一个css精灵图像中,我怎么能引用游标属性的背景位置,宽度,高度值.
就像是
cursor .fancybox-inner OR .fancybox-inner:hover cursor{
background: url(../img/cursors.png) no-repeat;
background-position: -32px 0;
width: 16px;
height: 16px;
}
推荐指数
解决办法
查看次数
标签 统计
css-sprites ×10
css ×7
html ×3
asp.net ×1
asp.net-mvc ×1
bootswatch ×1
clip ×1
compass-sass ×1
css3 ×1
imagemap ×1
imageresizer ×1
javascript ×1
less ×1
sass ×1
sprite ×1