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

我尝试使用Compass的伟大雪碧功能进行简单的工具提示。指南针样式 - 雪碧：灵活的背景图像

我想创造的东西是：

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

感谢您的帮助！

来源

2011-09-14 M00ly

只有A CSS的解决方案：HTTP：// CSS-技巧。com/examples/ShapesOfCSS /＃talkbubble – feeela

感谢您的css-only链接:) 但我真的很想使用精灵的东西，因为IE支持 – M00ly

从指南针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

来源

2012-03-25 01:59:02

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

回答

相关问题