1

我正在使用 Zurb Foundation 框架，并且正在尝试制作一些号召性用语按钮，这些按钮的大小是动态的，带有文本、背景渐变和右向箭头。

我可以想到三种可能的方法来做到这一点：

  1. 让一个元素包裹另一个元素并设置两个背景的样式，使一个具有渐变，另一个具有位于右侧的箭头。

  2. 只拥有一个带有渐变背景的元素，并将箭头作为 img 放在我的 html 中。

  3. 使用一个元素和一个背景图像，包​​括整个事物的渐变和箭头。

这些选项中的每一个都在某种程度上感觉不对 -

  1. 我有一个纯粹出于风格目的的非语义 div。

  2. 我的 html 中有一个 img，尽管它是纯粹的风格。

  3. 感觉像是一个肮脏的解决方案，特别是如果按钮是可扩展的。

这些选项的最佳实践是什么，或者有没有我没有考虑过的方法？当 Zurb Columns 缩放时，如何确保按钮与正确位置的文本和箭头很好地缩放？

非常感谢！:)

4

2 回答 2

1

我不确定我是否完全理解您的问题，但如果您使用的是 Foundation，那么您是否尝试过：

<div class="side-buttons">
    <button id="someid" class="nice [red:green:blue:black] button" onclick="someEvent();"/>
</div>

nice 类添加了一个类似于我相信你正在谈论的渐变。如果我没记错的话，侧边按钮类保持按钮宽度继承，即从具有“两列”类的嵌套 div 继承，但高度会根据文本进行调整。

希望我有帮助，也许你可以发布一些你所拥有的代码。

于 2012-05-18T04:21:20.760 回答
0

对于 Firefox 和 Webkit，您可以使用 CSS3 多背景语法通过 css 应用渐变和背景图像。

.gradAndImg {
    background-image: url(image.png), -moz-linear-gradient(top, #ffcc00, #ffffff);
    background-image: url(image.png), -webkit-gradient(linear, left-top, left-bottom, from(#ffcc00), to(#ffffff));
}
于 2012-03-31T18:11:47.267 回答