如何从grunt-contrib-packer中排除文件，例如，我想要制作一个由1x图形和@2x图形组成的雪碧表。
spritepacker: {
sprites: {
options: {
template: 'css/sprites.css.tpl',
destCss: 'css/sprites.css',
baseUrl: '/img/'
浏览 4提问于2015-02-26得票数 0
回答已采纳
在本地运行mvc网站(VS IIS)时，图像显示正确：
css代码片段：
.sprites {
background: transparent url(../images/sprites.png) no-repeat 0 0;
}
但是，当站点发布到服务器或本地IIS (而不是VS IIS)时，图像无法加载(提供无效路径)
在服务器上正确显示图像的唯一方法是修改css文件，而不是用"/content/images/sprites.png"代替"../images/sprites.png"。
为什么会这样呢？
浏览 0提问于2013-02-11得票数 4
回答已采纳
考虑以下CSS：
.my_class {
background-image: url(/images/sprites.png);
}
有时我会通过添加新的sprites来更改sprites.png，所以我不希望浏览器缓存它。
我想到的一个想法是将style="background-image: url(/images/sprites.png?<random_number_here>)"添加到所有具有my_class类的元素中，并删除上面的CSS代码。但是，由于可维护性问题，我不喜欢这种解决方案(例如，如果文件名发生更改，我必须在许多地方更改它，而不是在单个CSS
浏览 3提问于2011-08-15得票数 1
回答已采纳
我正在使用grunt-contrib-compass pluckin，我只是不能让它以我想要的方式运行，问题是我的css文件中的图像路径是错误的。
一直在玩，但我想不出来(悲伤的脸)
我的文件夹：
/root
/assets
/css
/images
/sprites <-- generated images
和我的gruntfile.js中的配置
compass: {
dist: {
options: {
sassDir: 'src/scss'
浏览 5提问于2013-07-03得票数 3
回答已采纳
1回答
我有一个任务，我需要完成之前，开始下一个吞咽的任务。这个任务创建了几个精灵。这需要一段时间，所以我需要这个任务，让它知道什么时候完成，这样下一个任务就可以开始了。这些任务在"gulpfile.js“中定义，而sprite任务称为"build-sprites.js".。
我一直在使用一个名为"run-sequence“()的gulp工具来排序这些任务。它显然需要要么返回一个流，一个承诺，或一个回调。但是，我不知道如何用这个"build-sprites.js“任务来完成这个任务。
gulpfile.js:
// Originally based off ht
浏览 1提问于2016-02-03得票数 1
此按钮位于CSS Sprites之前
<input type="image" src="/images/search-button.png" value="" id="search-button">
我正在尝试用我的一个搜索表单实现CSS Sprite，问题是如果我使用
<input id="search-button" class="sprites1" type="submit" value="">
它看起来会像这样。
如你所见，右
浏览 1提问于2012-05-02得票数 1
回答已采纳
2回答
罗盘雪碧路径引起误差
、、、
我已经试过了很多回应，但由于某种原因，我无法做到这一点。错误是：
No files were found in the load path matching "sprites/*.png"
我的config.rb代码：
relative_assets = true
cache=false
Encoding.default_external = "utf-8"
#########
# 1. Set this to the root of your project when deployed:
http_path = "/"
http_gener
浏览 6提问于2014-12-01得票数 0
回答已采纳
3回答
最近我处理了CSS精灵。它运行良好。
我创建了一个精灵，.css文件和html结构。看起来像是
.sprites{
background-image:url('../img/sprite.png');
background-color:transparent;
background-repeat:no-repeat;
height:44px;
width:44px;
}
.pic1 {background-position:0 0;}
.pic2
浏览 0提问于2011-07-01得票数 1
我正在为asp.net mvc2应用程序实现CSS。我遵循了下面的文章，并试图在一个示例项目上工作。
我在App_Sprites文件夹中添加了几个图像，然后运行应用程序。使用以下代码更新了Site.master和Index.aspx的HomeController视图：
Site.master：
<%: Sprite.ImportStylesheet("~/App_Sprites/") %>
Index.aspx：
<%: Sprite.Image("~/App_Sprites/community_icon_dkgreen.jpg")%>
浏览 0提问于2014-01-30得票数 0
回答已采纳
我正在努力让CSS精灵出现在我的HTML页面上，但我做不到。然后我把代码放到柱塞上，这样就可以共享代码了！然后，我明白它在Firefox上不起作用，而是在Chrome上起作用。
请帮帮我
源代码：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.outdoor {
background-image: url(sprites.png);
background-repeat: no-repeat;
background-position: -14p
浏览 3提问于2015-05-10得票数 0
回答已采纳
当我使窗口变大时，图像和它一起缩放，最终互相重叠。
我想要的是：
当我缩放窗口时会发生什么：
Html：
<html>
<head>
</head>
<body>
<link rel="stylesheet" type="text/css" href="styleE.css">
<script type="text/javascript" src="JQuery.js"></script>
<s
浏览 5提问于2014-10-29得票数 1
回答已采纳
2回答
我使用的是fullPage.js()，在第二节中我需要有一个滚动，图像就像电影一样变化(比如这个)。
我在第二节中添加了一个类‘sprites’，并用: normalScrollElements：'.sprites‘停止了normalScrollElements滚动，其思想是在滚动事件完成后删除该类，这样fullPage就可以继续正常滚动到下一节。
我一直在阅读关于改变滚动图像的类似问题，但是我无法让它工作，而且我不知道如何在滚动完成后删除类。
这就是我所拥有的
html：
<section id="second" class="section sprit
浏览 2提问于2015-02-13得票数 0
回答已采纳
对于我的项目(网站)，我使用一个名为的NPM包，它将我所有的SVG映像放入一个文件sprites.svg中并生成sprites.css。
在sprites.css中，有些CSS类将其background-image属性设置为sprite.svg中的svg图像。
sprites.css：
.icon:before {
content: ' ';
vertical-align: middle;
display: inline-block;
background-image: url(/img/sprite.svg);
background-r
浏览 1提问于2019-07-04得票数 0
1回答
我很难让CSS图像精灵出现在GWT UiBinder中。我确实检查了，但发现我已经在按照建议执行了。
我有一个带有CssBundle嵌套接口的ui.xml、ClientBundle接口和一个css文件。
ui.xml：
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.
浏览 2提问于2011-06-04得票数 3
回答已采纳
使用React，我创建了一个名为ItemPoke的组件。然后，我使用array.map从一个由4个对象组成的小数组读取数据。它的结构是模拟的，而不是h3和span标签的图像和内容。使用Chrome开发工具，我可以看到道具值，条纹是正确的标志，但图像和信息没有显示。我的代码：
const pokemons = [
{
name: "bulbasaur",
url: "https://pokeapi.co/api/v2/pokemon/1/",
sprite:
"https://raw.github
浏览 9提问于2022-06-25得票数 0
回答已采纳
1回答
我想对一个混合调用做一个简单的内插：
$models: "square", "square-green", "circle";
$services: "facebook", "twitter", "linkedin", "gplus", "feed";
@each $model in $models {
@include all-#{$model}-sprites;
@each $service in $services {
浏览 3提问于2012-10-31得票数 1
我有一个MVC4项目，其结构如下：
/Content/css/sprites/topbar.css
/内容/图像/topbar.png
在css文件中，我试图通过以下方法引用该图像：
background: url('../../images/topbar.png')
但是图像没有显示。如果我将其更改为图像位于：
/Content/css/sprites/topbar.png
并将css更改为：
background: url('content/css/sprites/topbar.png')
它可以工作，但这破坏了我的项目结构。
有什么想法吗？
浏览 10提问于2012-09-10得票数 5
回答已采纳
3回答
具有三种不同状态的CSS Sprites (按钮)：
标准
悬停
按下(活动)
目前“标准”、"Hover“和”按下“工作。问题是，“按压”只在鼠标按住时保持按住。我希望“按下”或“活动”状态保持活动状态，直到再次单击。有什么想法吗？CSS解决方案？javascript解决方案？
谢谢你的帮助，D
下面是代码：
<html>
<style type="text/css">
a.button {
background-image: url('BUTTON SPRITES IMAGE')
浏览 17提问于2011-07-25得票数 7
回答已采纳
我在一个垂直的精灵中有4个图片，我希望每个图片在我的页面上都变成一个href's，从left:250px top:2px开始，在每个图片之间填充3px。
CSS
.sprites {
background:url('/pic/sprites.jpg')no-repeat top left;
width:36px;
height:36px;
}
.sprites.sprites.twitter {
background-position:0px 0px;
}
.sprites.sprites.facebook {
backgroun
浏览 2提问于2013-12-24得票数 0
我有个奇怪的问题...我已经在本地安装了Wordpress (我在Ubuntu上)，现在我在访问一个图像文件时遇到了麻烦……在css中，我有：
.sprites{ background:url("sprites.png") top left no-repeat; }
._r3_c5{ width:210px; height:204px; background-position:-10px -10px; }
当我尝试这样做的时候：
<div class="sprites _r3_c5">
</div>
我什么也没看到。如果我随后检查我的源代
浏览 0提问于2012-12-09得票数 1
回答已采纳
我在wwwroot中有svg-icons和Bootstrap文件夹。
我使用SVG图标的html代码是：
<svg class="olymp-happy-face-icon"><use xlink:href="svg-icons/sprites/icons.svg#olymp-happy-face-icon"></use></svg>
当我运行我的ASP.NET MVC项目时，我得到了控制台：
XML解析错误:找不到根元素
位置：
如何将svg-icons文件夹导入或href到ASP.NET MVC，如
&l
浏览 30提问于2019-06-24得票数 1
我正在尝试使用Compass/SASS生成子画面，并收到以下错误：
NoMethodError on line ["21"] of /Library/Ruby/Gems/2.0.0/gems/chunky_png-1.3.1/lib/chunky_png/chunk.rb: undefined method 'unpack' for nil:NilClass
我的图标都在images/icons里。这是我的_sprites.scss partial：
@import "compass/utilities/sprites";
@import
浏览 3提问于2014-06-22得票数 1
1回答
我已经看到这个问题在这里被问了很多次了，但是没有任何回复帮助我解决这个问题:我试图用console.log().引擎加载雪碧，但是它没有出现，尽管它已经被识别出来，而且在使用PixiJS时也很不稳定。我做错了什么？
我遵循了这个URL中的教程：
我的代码如下：
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=
浏览 0提问于2017-01-05得票数 1
回答已采纳
1回答
使用compass的sprite生成器时，生成器会基于像素创建CSS规则。
示例代码：
@import 'compass/utilities/sprites';
$sprite-2-layout: horizontal;
@import "sections/anatomy-sprite-test/sprite-2/*.png";
@include all-sprite-2-sprites;
$sprite-3-layout: horizontal;
@import "sections/anatomy-sprite-test/sprite-3/*.pn
浏览 0提问于2014-09-10得票数 2
1回答
使用CSS，如何使按钮图像background: url();相对于父div缩小？父div是居中的，并根据视口宽度vw设置为缩放。
有什么想法吗？
编辑这里重要的是缩放到视口宽度，而不是父div。
body {
background-color: rgb(0,0,0);
margin: 0px;
border: 0px black;
padding: 0px;
}
#parent {
background-color: grey;
width: 80vw;
font-size: 0;
position: absolute;
top: 50
浏览 0提问于2018-06-11得票数 0
回答已采纳
1回答
我需要在WordPress页脚中增加一些精灵的大小，但我想不出一个很好的方法。
我试着按照推荐的几个线程来调整background-size，但是没有结果值得一提。
我用的是transform: scale(2)，它起作用了，但看起来很糟糕。(比正常像素化最差)
HTML:
<div>
<div class="sprites sprite1"></div>
<div class="sprites sprite2"></div>
<div class="
浏览 5提问于2015-09-10得票数 2
回答已采纳
1回答
我正在使用位于的Asp和图像优化框架来处理我站点中的任何css精灵。根据浏览器，框架生成指向这两个文件的两个不同的链接
/App_Sprites/highCompat.css - ie9, firefox, chrome
/App_Sprites/lowCompat.css - ie6, ie7
不幸的是，css文件没有缩小，不能从当前位置移动。
我有自己的小型化引擎，但在Ajaxmin库中，我使用处理程序动态丢弃压缩的css。
这会捕捉到这样一条路。
/css.axd?path=reset.css|style.css|helpers.css
我如何使用MVC捕获请求并
浏览 1提问于2011-08-12得票数 0
回答已采纳
我已经为Compass雪碧公司战斗了几天。
我的网站有以下结构：
+ project
- config.rb
+ application
+ scss
- _base.scss
- main.scss
- ...
+ public (webroot)
+ js
+ css
- main.css
+ images
+ sprites
- boxarrow.pn
浏览 7提问于2014-06-05得票数 4
回答已采纳
1回答
我都快疯了想要弄清楚这件事。我在一个Wordpress项目中使用了指南针，并且在我的Wordpress主题根目录中保存了指南针configure.rb文件。这是我的configure.rb文件：
add_import_path "bower_components/foundation/scss"
http_path = ""
http_images_dir = "images"
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
ja
浏览 2提问于2014-06-11得票数 0
我正在尝试向已经在HTML中的画布节点添加新的画布节点。在将第一个节点作为子节点添加之后，该节点只会被替换为新节点，而不是在最后一个节点之后添加。我试过同时使用append和appendChild，两者都在做同样的事情。
在一个小小的背景下，我试图制造多个球，当它们相互碰撞或在画布边界上碰撞时，它们会“弹起”。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
浏览 1提问于2022-05-03得票数 0
每次运行我的sprite任务时，我都会得到错误的EPERM:操作不被允许，mkdir‘C：\Users\’。我希望图像路径是相对的。
当scss文件正确地保存在父(src)文件夹中时，我不明白为什么我的新spritesheet的目标指向我的用户目录。另外，scss正确构建并在/sprites中读取我的png文件。
我的文件夹结构：
/
src/
node_modules/
sprites/
_sprites.scss
gulpfile.js
www/
images/
吞咽任务：
var spritesmith = require('g
浏览 4提问于2017-10-01得票数 0
回答已采纳
在将Devise视图更新为最新版本(1.1.0)后，我会得到以下错误。如果切换回0.0.11，一切正常。
有什么问题吗？
在我的Gemfile中，我有这个
gem 'devise'
gem "twitter-bootstrap-rails"
gem "devise-bootstrap-views"
application.css
/*
*= require devise_bootstrap_views
*= require_tree .
*= require_self
*/
bootstrap_and_overri
浏览 1提问于2019-01-18得票数 0
1回答
我在我的css中使用了很多精灵，图像的所有位置都已在css中硬编码。现在，我计划将所有图像移动到CDN。在每个地方改变路径是非常困难的。有没有办法把这个位置作为一个变量放在配置文件中，这样当我移动到另一个CDN时，我就不需要改变所有地方的路径了。我使用的是python和django环境。我的示例代码：
#header .topriglogin .telephone{background:url(../images/sprites.gif) -314px -183px no-repeat;}
我的期望是：
#header .topriglogin .telephone{background:u
浏览 0提问于2012-01-03得票数 0
回答已采纳
1回答
通过悬停在2幅图像之间进行滚转
、、、、
我正在使用React，并试图通过悬停它们来改变2幅图像。
这就是我到目前为止所做的：
Card.js
<div className="image-wrapper">
<img src={sprites.front_default} className="image" alt="normal" />
<img src={sprites.back_default} className="image-hover" alt="hover" />
</div>
浏览 9提问于2022-01-08得票数 0
1回答
我使用了SASS精灵：
“‘channel”是“images”中的文件夹名称，其中包含要精选的图像。以下代码创建了一个图像精灵：
@import“指南针/实用程序/sprites”；@import "channel/*.png"；@include all-channel-sprites；
然而，CSS中的图像路径略有错误。它的输出是：
background-image: url('/images/channel-s78ec12c377.png')
但我真的需要这个：
background-image: url('../images/channel-s78
浏览 0提问于2014-12-15得票数 0
我想使用url的一部分来帮助缓存分解和跟踪我的应用程序中使用的资源的版本
也就是说，我有一个web应用程序，它的资源是独立的，由nginx提供服务。资源保存在文件夹中：
app_name/img/sprites.png
app_name/css/compressed.css
app_name/scripts/mini.app.js
然后我想用以下形式的uris引用这些uris：
/app_name/#{version}/img/sprites.png
或者也许
/#{version}/app_name/img/sprites.png
其中#{ version }是要加载的资源的版本。
然后，我
浏览 0提问于2012-05-21得票数 1
回答已采纳
是否有一种方法可以使用sprites而不使用
background: url();
财产？
例如，有没有一种方法可以将sprites与
<img>
而不是标签？
我问的原因是因为我试图在流体网格系统中使用CSS精灵，并且我需要能够控制图像的最大宽度。
浏览 0提问于2013-02-17得票数 1
回答已采纳
编辑：，我现在觉得很蠢。原来问题出在我的global.scss上：
.settings{
@include site-icons-sprites(settings);
}
而不是网站图标-精灵，我把网站图标-精灵，它的工作，如预期的。
我试图在Rails应用程序中使用sprites和Compass，但是我一直收到以下错误：
NoMethodError on line ["100"] of /usr/local/rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/lib/compass/sass_extensions/functio
浏览 3提问于2013-07-22得票数 0
3回答
您好，我正在使用sprite框架
我让它正常工作，这样我就可以做如下事情：
@Microsoft.Samples.Web.ImageSprite.Image("~/App_Sprites/icons/calendar.png")
但是如何使用css文件中的图像呢？例如
#wrapper {
width: 980px;
margin: 0 auto;
background: url(/App_Sprites/images/img01.gif) repeat-y left top;
}
浏览 2提问于2011-01-30得票数 0
1回答
当使用指南针/Sass时，我通常将生成的style.css和sprites放在我的.gitignore文件中，这样它们就不会弄乱我的提交。
但是现在我遇到了这样的情况:我提交了一个在线系统，但是我的style.css和sprites没有被推送，因为它们被忽略了/没有被提交。
现在我想知道是否有一种方法，我仍然没有提交这些文件，但当我执行git push时，它们被上传到我的在线存储库
浏览 1提问于2013-07-26得票数 0
我想创建一个精灵与几个图像，将被用作背景。它们中的一些将与norepeat一起使用，而另一些将使用-x。
设置这种风格的最好方法是什么？
到目前为止，我已经尝试过了，但它不能正常工作：
css
.sprites {
background-color: transparent;
background-image: url(img/sprites.png);
background-repeat: no-repeat;
}
.bg {
width: 1px;
height: 25px;
background-position: 0 0;
浏览 0提问于2012-07-24得票数 1
回答已采纳
2回答
我想用Gulp创建一个sprite，自动创建一个带有坐标的CSS文件，然后用名称插入这个sprite中的图像，比如：
.my_class {
background-image: url("images/my-image.png");
}
经过一项研究，我想使用，但我不知道如何使用它。
在我的gulp文件中，我添加了这个插件的配置：
gulp.task('sprites', function () {
var spriteOutput = gulp.src(app + '/css/*.css')
.pipe(plug
浏览 0提问于2016-03-18得票数 1
我想包括自定义CSS，而不重写或其他通过连接的变化。发现IBM css是在customization/common/nav/internal/stylelinks.jsp中加载的。
示例来自原始文件中的最后一行：
<link rel="stylesheet" type="text/css" id="lotusSpritesStylesheet" href="<c:out value="${urlWebResources}" />/web/_style?include=com.ibm.lconn.core.
浏览 0提问于2018-11-22得票数 0
我正在尝试设置gulp spritesmith，并得到上述错误，每次我粘贴在图标folder.Also试图让它编译通过sass.Node版本2.14.12在mac.If上有任何其他‘精灵’插件，更容易使用，请建议。
'use strict';
// Include gulp
var gulp = require('gulp');
// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var
浏览 4提问于2016-02-12得票数 1
在我的.scss中，我使用了CSS3伪类。例如：
.btn:disabled {
@include assets-sprites(btn_disabled);
}
.btn.disabled {
@include assets-sprites(btn_disabled);
}
Compass将这两个声明合并为一个：
.btn:disabled, .btn.disabled {
background: url("img/assets.png")
}
但是，如果选择器中存在CSS3伪类(如:disabled、:checked、:not等)，则Internet Explo
浏览 0提问于2014-07-17得票数 0
这是非常简单的翻转图像在CS5中使用内置的Javascript，但是，我需要做这基于CSS。
我已经设法让代码工作，精灵都很棒，但我似乎有一个问题…我需要使这些可点击(指向)到一个URL。我尝试了每种方法，包括在div行中的<a href> url。我甚至试着把url和图片放在一起。我不想像我在其他地方看到的那样，使用<li>方法从头开始。我甚至不能将其发送到work...so。总之，有没有(简单的)方法让精灵指向一个url...thank you！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti
浏览 2提问于2011-06-29得票数 0
1回答
我使用的是grunt-spritesmith，它生成一个css文件，如下所示：
.icon-admin {
background-image: url(../sprites/spritesheet.png);
background-position: -288px -856px;
width: 37px;
height: 32px;
}
.icon-report {
background-image: url(../sprites/spritesheet.png);
background-position: -256px -888px;
width: 26px;
浏览 4提问于2015-01-31得票数 0
回答已采纳
1回答
我试图在设置一个Gruntfile.js Grunt任务。有些地方出了问题，因为所有的代码都在编译，但没有被自动修复。我已经阅读了所有的自动修复任务和我做了许多更改，但它们都失败了。
"use strict";
module.exports = function( grunt ) {
grunt.initConfig({
watch: {
css: {
files: [ 'assets/sass/**/*.scss' ],
tasks: [ 'sass:prod', 'sass:
浏览 1提问于2016-01-06得票数 0
回答已采纳
嗨，我有一个link_to代码行，将有一个动态的精灵/图标。
链接图像必须是基于provider名称的动态的，它必须有css精灵，所以我使用raw来设计它。
= link_to raw('<div class="#{provider.name}_sprites"> </div>'), directory_user_path(provider_id: provider.id, creator: creator.id), remote: true
实际上，如果类名是静态的，那么精灵是可以工作的，但是在通过Gchrome的检查
浏览 4提问于2014-01-03得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
