标签: css-sprites

我有两个css文件:

1. 主文件(main.css)

2. 特定页面文件(page5.css).我的page.css包含main.css(@import url(main.css));)

我的main.css将其作为设置页面高度的一部分

#content {
    background:url(../images/image.png) no-repeat;
    width:154px;
    height:356px;
    clear:both;
}

这适用于所有其他页面,但在第5页,我需要更高的高度.

我该怎么做呢？

我有一个用于CSS精灵的背景图像

现在问题是我只能使用流体布局(只有%,没有px)并且%定位会在调整浏览器大小时产生问题(例如,显示其他箭头的某些部分)

我该如何解决 ？我可以举例说明如何使用%定位作为背景吗？

假设我想>用花哨的图像箭头替换链接.为此,我想使用CSS精灵.

在许多文章中,例如在Smashing Magazine 最近的一篇(2012年)文章中,推荐的方法是这样的:

• HTML:

  <a href="/article/123" class="nextLink">&gt;</a>
  

  Run Code Online (Sandbox Code Playgroud)

• CSS:隐藏文本并指定精灵作为背景

但是,此方法在可访问性方面存在问题:如果禁用图像但解释了CSS,则上述链接将不可见.

有趣的是,我发现Paciello集团的一篇旧文章(2010年)提出了一个看起来很好的解决方案.我们的想法是<span>在要替换的文本旁边放置一个.它<span>有一个背景图像,位于文本的顶部.如果图像加载,它将替换文本,否则文本仍然可见.

为什么这种方法没有被广泛使用？这个解决方案有问题吗？

出于某种原因,我不完全确定原因,但以下是行不通的.悬停时背景位置保持不变.我无法弄清楚为什么.我可以用另一种方式做到,但我想尝试找到它为什么不起作用的底部.

#nav a:link, #nav a:visited {
    background:url(../img/nav-sprite.png) no-repeat;
    display:block;
    float:left;
    height:200px;
    padding:10px;
    text-indent:-9999px;
    border:solid 1px red;
}

    #nav a#home {
        background-position:-10px 0px;
        width:30px;
    }
    #nav a#about-us {
        background-position:-85px 0px;
        width:45px;
    }

#nav a:hover    {
    background-position:1px -15px;
}

有人知道是什么原因引起的吗？

提前致谢!

瑞安

我将以堆栈溢出本身为例:

堆栈溢出使用单个图像显示图标(参见下图):

• 这种显示图标的方法是什么？
• 怎么做？

sprites.png http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4

越过你的手指可以帮助我!

我正在使用SmartSprites将我的目标网页上的PNG合并为一个,以便加载更快.

SmartSprite将检查您的CSS文件,生成CSS Sprite图像,并创建一个新的CSS文件,该文件将使用此精灵图像而不是原始图像.我想要做的是在我的maven WAR构建期间自动用SmartSprite替换原始的CSS文件.

所以这就是我想要发生的事情:

1. SmartSprite扫描我的CSS文件:mystyle.css
2. SmartSprite创建一个精灵图像,并创建一个新的mystyle-sprite.css文件,该文件引用新的精灵图像.
3. 我想在构建 WAR之前在mystyle.css上复制mystyle-sprite.css,这样我就不必更改JSP文件中的任何引用.

这两个文件都位于输出目录(target/myproj/css)中.SmartSprite中似乎没有任何标志可以覆盖原始文件,所以我想它必须在后期处理中完成.

下面是我用于SmartSprite的maven插件配置.

        <plugin>
            <groupId>org.carrot2.labs</groupId>
            <artifactId>smartsprites-maven-plugin</artifactId>
            <version>1.0</version>
            <executions>
                <execution>
                    <phase>prepare-package</phase>
                    <goals>
                        <goal>spritify</goal>
                    </goals>
                </execution>
            </executions>
        </plugin>

我有一个CSS精灵图像,footer1.png.我想使用CSS来裁剪图像的一部分,然后将图像平铺为我的.headimg3元素的背景.

我正在尝试使用clip和background属性来实现这一点,但图像不会被裁剪.

.headimg3 {
  background: url(footer1.png) bottom;
  background-position: -35px -358px;
  background-repeat: repeat;
  height:34px;
  overflow: hidden; 
  clip: rect(0px, 200px, 0px, 400px); 
}
.headimgp {
  padding: 8px 0px 0px 10px;
  text-shadow: 2px 1px #fff;
}

<div class="headimg3">
  <div class="headimgp">
    &nbsp; LATEST Updates
  </div>
</div>

如何仅使用CSS裁剪和平铺背景图像？

怎么出来../images ..对于指南针sass精灵？
并且有谁知道在哪里可以找到指南针sass精灵的传感器文件？例如sprite-url功能,在官方网站上找不到.

--css
--sass
    --test.scss
--images
--sprite-images
    --icons
        --a.png
        --b.png

.test.scss codes:
-----------------------
$sprite: sprite-map("icons/*.png");
.hello{
    background-image : sprite-url($sprite);
}

outputs
------------------------
.hello{
    background-image : url('/images/icons-s2c837140f3.png');
}

<!-- but I want to output  -->
.hello{
    background-image : url('../images/icons-s2c837140f3.png');
}

我有css精灵图像.它工作正常,但问题是我希望图像右侧的锚标记的文本.但它显示在左侧.精灵图像在这里.

http://jstiles.com/temp/1360875952/ctrls/css-sprite.png

预期结果:

[Mylinktext]<MyImagehere>

我得到的实际结果是

<MyImagehere>[Mylinktext]

我不想在伪类之后使用.但是它也不会在IE7浏览器中运行.我的代码如下.

.ctrls
    {
        font-family:Arial;
        font-weight:bold;
        font-size:16px;
        color:black;
        background-image: url(images/ctrlsprite.png);
        //background-image: url(images/css-sprite.png);
        background-repeat:no-repeat;
        text-decoration:none;
        display: inline-block;
        padding-left:30px;  
    }
    .ctrls:hover
    {
        background-position: 0px -252px;
        text-decoration:underline;      
    }
    a.magenta
    {
        background-position:0px -144px;
    }

和HTML

<div>
    <p>Magenta</p>
    <a href="#" class="ctrls magenta">Et Movet</a>
</div>

如何将图像放置在文本的右侧？

考虑我有一个包含100个图标的图像,大小为16x16.因此图像大小为1600x16.现在我想要一个HTML 5标签来显示nth图像.什么是HTML语法来定义要显示的图像的特定部分

<img src="pic.jpg" height="16" width="16" offsetOrSomething=??/>