Question

我想要实现的是这样的。

::::::::::
...嗨....
..........
..........
喜是在2种颜色的中间。

我有1种颜色，下面是另一种颜色，但希望颜色在文本中间分开。（如果没有人能用css提出解决方案（试图避免使用图像），我将使用按钮图像

编辑：当然css结果必须跨越浏览器（即7 +，FF3.0 +，chrome，opera（最新））

由于

Answer 1

您可以使用多个嵌套元素来实现此目的，尽管您的标记语义较少。

或者你可以使用渐变;这是生成跨浏览器CSS的好资源 - http://www.colorzilla.com/gradient-editor/

或者你可以使用CSS3多重背景属性，这显然还不符合浏览器标准。有关详细信息，请参阅此链接 - http://www.zenelements.com/blog/css3-background-images/

如果这些都没有帮助，请向我们展示您迄今为止所取得的成就的代码，并且建议起来会更容易。

Answer 2

HTML：

<div class="fancyButton">
    <div class="background top"></div>
    <div class="background bottom"></div>
    <p>hi</p>
</div>

CSS：

.fancyButton
{
    width:100px;
    position:relative;
}

.fancyButton .background
{
    width:100%;
    height:50%;
    position:absolute;
}

.fancyButton .background.top
{
    top:0;
    background-color:red;
}

.fancyButton .background.bottom
{
    bottom:0;
    background-color:blue;
}

.fancyButton p
{
    position:relative;
    text-align:center;
}

经过测试，并希望正确地进行复制粘贴。它使用一个div，它从它内部的<p>开始。两个背景设置在按钮div的顶部和底部，并且是它的高度的50％，因此无论按钮的高度是什么，它们都能很好地在中间相遇。如果需要，您可以取出固定宽度并用按钮div的左右填充声明替换它，以便宽度由<p>确定。（只是意识到这一点，不想重新测试）

没什么特别的;只是坚实，健壮的CSS！

Answer 3

您可以创建一个css渐变，其中两个停靠点彼此非常接近：firefox css gradients。它不会是跨浏览器。此页面上的第二个示例非常接近您的需求：webkit simple gradients（仅限webkit）。

Answer 4

这里唯一的选择可能是使用CSS3渐变，正如其他答案所提到的那样。但是，如果您决定使用图像（因为某些浏览器不支持CSS3 for instanct），这个tutorial about transparent sprites非常有用。

是否可以为按钮提供2种不同的背景颜色（井css按钮）

4 个答案: