是可能有一个按钮的2种不同的背景颜色（井css按钮） [英] is it possible to have 2 different background colors for a button (well css button)

问题描述

我想实现的是这样的。

::::::::::

... hi ....

..........

..........

嗨是在两种颜色的中间。

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

编辑：当然css结果有

感谢

解决方案

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％，所以它们在中间很好地相遇，无论按钮是什么高度。您可以取出固定宽度，并替换为左侧padding声明为按钮div，如果你想要的，所以宽度由< p> 太。 （只是意识到这一点，不想重新测试）

没什么好奇的;只是坚固，健壮的css！

What I want to achieve is something like this.

::::::::::
...hi....
..........
..........
The hi is in the middle of the 2 colors.

I have it working for 1 color, and another color underneath, but would like the colors to split up in the middle of the text. (I'll be using button images if no one can come up with a solution using css (Trying to avoid using images)

EDIT: Of course the css result has to be across browsers (ie 7+, FF3.0+, chrome, opera (newest))

Thanks

解决方案

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

Tested, and hopefully copy-pasted correctly. It uses a div that takes it's height from the <p> inside of it. The two backgrounds are set to the top and the bottom of the button div and are 50% of it's height so they meet nicely in the middle, no matter what height the button is. You can take out the fixed width and replace it with a left-right padding declaration for the button div if you want, so that the width is determined by the <p> too. (just realizing this and don't want to retest)

Nothing fancy; just solid, robust css!

这篇关于是可能有一个按钮的2种不同的背景颜色（井css按钮）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！