指南针样式 - 精灵：灵活的背景图像答案

【问题标题】：Compass Style - Sprite: flexible background-image指南针样式 - 精灵：灵活的背景图像
【发布时间】：2012-03-25 09:59:02
【问题描述】：

我尝试使用 Compass 的 Sprite 功能来制作一个简单的工具提示。

我要创建的是：

html代码：

 <h2>*BUG* Sprite Tooltip with Compass</h2><br /><br />
        <div id="tooltip_test">
            <div class="tooltip-Tooltip_up"></div>
            <div class="tooltip-Tooltip_bg">asdsad<br /></div>
            <div class="tooltip-Tooltip_down"></div>
        </div>
        <h2>Sprite Tooltip with Compass &customBG</h2><br /><br />
        <div id="tooltip_test">
            <div class="tooltip-Tooltip_up"></div>
            <div class="custombg">asdsad</div>
            <div class="tooltip-Tooltip_down"></div>
        </div>

对于第一个工具提示，我使用了 compass 生成的 bg 类。

对于第二个工具提示，我使用了一个自定义的 bg 类（用于向您展示我想要的）

生成的精灵是：

（第一像素行是背景图像，然后是页眉和页脚）

所以我的问题是：

是否可以重复 spriteimage 的 bg 区域（由指南针生成）以获得灵活的工具提示高度？

我手动生成的类的代码是：

 .custombg {
        background: url('images/tooltip/Tooltip_bg.png');
        height: 100px;
        width: 258px;
    }

感谢您的帮助！

【问题讨论】：

纯 CSS 解决方案：css-tricks.com/examples/ShapesOfCSS/#talkbubble
感谢 css-only 链接 :) 但由于 IE 支持，我真的很想使用 sprite 的东西

标签： css sass compass-sass

【解决方案1】：

从 Compass v0.12 开始，可以重复精灵的一部分，但重复只适用于 x 轴。

由于报价气泡的中间部分只是一种纯色，因此您可以使用 css 对其进行样式设置，并将现有的精灵用于报价气泡的顶部和底部。

使用纯 css3 有很多方法可以做到这一点，但是如果你想在旧版本的 IE 中使用图像来完成这项工作，你可以在单个 html 元素上使用 before 和 after 伪元素。

试试这个……

使用这个文件结构：

images/
  tooltip/
    top.png
    bottom.png
  tooltip-sfc34d436c9.png  <-- Sass will create this file.
sass/
  sprite.sass
sprite.html
stylesheets/
  sprite.css

而sprite.html 包含这个：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link href="stylesheets/sprite.css" rel="stylesheet" />
  </head>
  <body>
    <div class="tooltip">
      To be, or not to be, that is the question.
    </div>
  </body>
</html>

而sprite.sass 包含这个：

// Sprite setup
$tooltip-sprite-dimensions: true
@import "tooltip/*.png"

// Tooltip styles
$tooltip-top-image: "tooltip/top.png"
$tooltip-top-width: image-width($tooltip-top-image)
$tooltip-top-height: image-height($tooltip-top-image)
$tooltip-bottom-image: "tooltip/bottom.png"
$tooltip-bottom-width: image-width($tooltip-bottom-image)
$tooltip-bottom-height: image-height($tooltip-bottom-image)
$tooltip-width: $tooltip-top-width
$tooltip-h-padding: 10px
.tooltip
  position: relative
  width: $tooltip-width - ($tooltip-h-padding * 2)
  background: #8aa5bb
  padding: $tooltip-top-height $tooltip-h-padding $tooltip-bottom-height
  &:before
    content: ""
    position: absolute
    top: 0
    left: 0
    +tooltip-sprite(top)
  &:after
    content: ""
    position: absolute
    bottom: 0
    left: ($tooltip-width - $tooltip-bottom-width)/2
    +tooltip-sprite(bottom)

而sprite.css 编译成这个sprite.css：

.tooltip-sprite, .tooltip:before, .tooltip:after {
  background: url('../images/tooltip-sfc34d436c9.png') no-repeat;
}
.tooltip {
  position: relative;
  width: 232px;
  background: #8aa5bb;
  padding: 15px 10px 13px;
}
.tooltip:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-position: 0 -13px;
  height: 15px;
  width: 252px;
}
.tooltip:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -3px;
  background-position: 0 0;
  height: 13px;
  width: 258px;
}

完成的工具提示将如下所示：

【讨论】：