个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
26
4
我尝试使用 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 类(用于向您展示我想要的内容)
生成的 Sprite 是:
(第一个像素线是背景图像，然后是页眉和页脚)
所以我的问题是:
是否可以重复 spriteimage 的 bg 区域(由 compass 生成)以获得灵活的工具提示高度？
我手动生成的类的代码是:
.custombg {
background: url('images/tooltip/Tooltip_bg.png');
height: 100px;
width: 258px;
}
感谢您的帮助!
最佳答案
从 Compass v0.12 开始，可以重复 Sprite 的一部分，但重复仅在 x 轴上有效。
因为报价气泡的中间部分只是一种平面颜色，您可以使用 CSS 对其进行样式设置，并将现有的 sprite 用于报价气泡的顶部和底部。
使用纯 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;
}
完成的工具提示如下所示:
关于css - compass 风格 - 雪碧 : flexible background-image，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7414918/
26
4
0
一旦我的游戏结束，它会显示一个重播按钮，但我不明白如何让 Xcode 知道游戏结束后是否有触摸。我的重播按钮的代码在 didBeginContact 方法中，如下所示: func didBeginCo
长期阅读。第一次海报。我遇到了一个问题，它已经破坏了几个小时的脑细胞并且没有快速进展。所以我想我应该把它推到这里，让新的目光看到它...... 基本上，我正在尝试使用 C++ 和 DirectX 11
我尝试使用 Compass 出色的 Sprite 功能来制作简单的工具提示。 我要创建的东西是: html代码: *BUG* Sprite Tooltip with Compass
据我们所知，SKScene 的原点位于左下角。 但我尝试从一个包含 0 和 1 矩阵的文件中加载一个简单的关卡。虽然 0 什么都不是，但 1 表示一堵墙(简单的矩形)。 由于文件的内容明显是从左上角到
我是一名优秀的程序员,十分优秀！