使用CSS或更少的内容翻转背景
使用CSS或更少的内容翻转背景
提问于 2012-05-20 13:53:01
有没有一种方法可以使用CSS或更少的编程来翻转元素的背景？具体地说，我想反转按钮的背景渐变。我不想让按钮的内容被翻转--只想要背景。
例如，如下所示：
.button {background-image:linear-gradient(top, #000, #fff);}应该变成：
.button:active {background-image:linear-gradient(top, #fff, #000);}- EDIT:添加更多细节。
使用下面的代码：
.button {
background-image:linear-gradient(top, red, green);
&.primary {background-image:linear-gradient(top, blue, yellow);}
&.secondary {background-image:linear-gradient(top, brown, grey);}
&:active {background-image:linear-gradient(top, ..., ...);}
}有没有办法让我不需要为".button“、".primary”和".secondary“类分别定义":active”状态，就可以反转渐变的方向？
回答 4
Stack Overflow用户
发布于 2013-06-08 04:19:12
使用较新的浏览器
这篇文章已经发布一年多了，但我想我应该注意到，现在有一个针对一些较新浏览器的解决方案。以下代码已在IE10 (在IE9及更低版本中不起作用)、FF21和Chrome27中进行了测试。
使用伪元素和转换，您可以获得最初所需的内容。最初，一些问题不允许对伪元素进行转换，因此这在一些较旧的版本中将不起作用。
要获得回退支持，请使用 may still want the additional vendor prefixes。
更少的
.button {
background-image:linear-gradient(to bottom, red, green);
position: relative;
&:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
&:active {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
}
&.primary {background-image:linear-gradient(to bottom, blue, yellow);}
&.secondary {background-image:linear-gradient(to bottom, brown, grey);}
}Stack Overflow用户
发布于 2012-05-20 14:02:48
我不确定你的background-image:linear-gradient(top, #fff, #000); css规则，但是如果你想改变按钮的背景，我猜这是办法--用[type='']代替.class选择器，否则:active将不起作用。
input[type="button"] {background:#fff;}
input[type="button"]:active {background:#000}
[...]
<input type="button" value="Test"/> Stack Overflow用户
发布于 2012-05-20 14:06:33
你的意思是这样：
http://jsfiddle.net/UgQvg/2
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10671137
复制相关文章
相似问题
腾讯云开发者
