1

更新：这个问题的原始措辞含糊不清，因此我对其进行了修改以更好地表达我的要求。

假设我有两个 div

<div class='button'>A</div>
<div class='button green-button'>A</div>

具有以下样式：

div.button {
  /* define position,  size, etc ...*/
  color:#FBB
  background-color:#F00
}

div.button.green-button{
  color:#BFB
  background-color:#0F0
}

在此处输入图像描述在此处输入图像描述

在此示例中，只需将color和的值更改一位，即可轻松将第一个按钮的色调从红色变为绿色background-color。如果我想做一个蓝色按钮，我可以再次为第三个按钮做同样的转变。

但是，在我不想完全从一种颜色转换到另一种颜色的情况下，它有点棘手。

此外，我想对 div 中的所有内容进行颜色转换，而不仅仅是background-color和color属性。因此，如果我要在 div 中放置和图像，图像的颜色也会发生变化。

这在 CSS 中可能吗？如果不能，你可以用 Javascript 来做吗？

4

6 回答 6

5

由于每个人都在发布疯狂的猜测，我会直接进入它。

您可以使用CSS 过滤器实现某些目标（在您的情况下hue-rotate）

或者使用像LESS这样的 CSS 预处理器。

于 2012-09-29T17:49:19.537 回答
1

是的，你需要多个元素。

HTML：

<div>
    <span class="over-bg"></span>
    <span>A</span>
</div>​

CSS：

div, span { height:100px; width:100px; vertical-align:middle;
            text-align:center; }

div { background-color:#ff3300; position:relative; margin:20px; float:left; }
span { position:absolute; left:0; top:0; height:100%; width:100% }
span.over-bg { background-color:#22FF00; display:none; }
div:hover span.over-bg { display:block; }

http://jsfiddle.net/TeCvr/1/

另一种使用伪元素的方法：

HTML：

<div>
    <span>A</span>
</div>​

CSS：

div, span { height:100px; width:100px; vertical-align:middle;
            text-align:center; }

div { background-color:#ff3300; position:relative; margin:20px; float:left; }
span { position:absolute; left:0; top:0; height:100%; width:100% }
div:hover:before { display:block; content:""; position:absolute; left:0;
                   top:0; height:100%; width:100%; background-color:#22FF00; }

http://jsfiddle.net/TeCvr/2/

于 2012-09-29T17:42:34.540 回答
1

你的意思是这样的：

演示

HTML：

<a class="button">A</a>​

CSS：

.button{
    font-family:sans-serif;
    font-size: 80px;
    display:block;
    line-height:100px;
    text-align:center;
    color:rgba(255,255,255,0.5);
    width:100px;
    height:100px;
    background-color:green;
}

.button:hover{
    background-color:red;
}
​

或者您是否正在寻找能够自行计算颜色偏移的东西？

如果你有 CSS3 的filter: hue-rotate(angle);

演示

HTML：

<a class="button">A</a>​

CSS：

.button{
    font-family:sans-serif;
    font-size: 80px;
    display:block;
    line-height:100px;
    text-align:center;
    color:rgba(255,255,255,0.5);
    width:100px;
    height:100px;
    background-color:green;
}

.button:hover{
    -webkit-filter:hue-rotate(250deg);
    -moz-filter:hue-rotate(250deg);
    -ms-filter:hue-rotate(250deg);
    filter:hue-rotate(250deg);
}
​
于 2012-09-29T17:51:47.600 回答
1

好吧，您可以使用 CSS3 支持的过渡样式规则，例如：

   .button:hover {
     background-color: #F0F0F0;
     -webkit-transition: background-color 1ms linear;
     -moz-transition: background-color 1ms linear;
     -o-transition: background-color 1ms linear;
     -ms-transition: background-color 1ms linear;
     transition: background-color 1ms linear; 
}

是否有任何具体原因说明您为什么要实现这一目标..？我想不出任何这样的应用程序；除非您在对设计进行逆向工程时遇到此问题并且找不到导致此行为的 CSS..？

参考： http ://www.css3.info/preview/css3-transitions/

于 2012-09-29T17:55:36.977 回答
0

我不知道我是否理解你。您可以更改 div 的类。例如 .button 到 .buttongreen 具有不同的属性。

于 2012-09-29T17:44:36.970 回答
0

不使用color和background-color属性，你仍然可以使用：

    background-image: linear-gradient(to bottom, #006e2e 0%,#006e2e 100%)

这是从给定颜色到相同颜色的渐变，但整个渐变不是 CSS 中的颜色。

于 2012-09-29T17:45:14.963 回答