Question

我尝试使用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>

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

对于第二个工具提示，我使用自定义bg类（用于显示我想要的内容）

生成的精灵是：

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

所以我的问题是：

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

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

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

感谢您的帮助！

Answer 1

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

因为你的报价泡泡的中间部分只是一个平面颜色，你可以用css设置它的样式，并使用你现有的精灵作为报价泡泡的顶部和底部。

使用纯css3有很多方法可以做到这一点，但是如果你想使用图像在旧版本的IE中使用它，你可以在单个html元素上使用伪元素之前和之后。

试试这个......

使用此文件结构：

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;
}

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

finished tooltip

指南针样式 - 雪碧：灵活的背景图像

1 个答案: