1

我试图在 CSS3 中复制这个按钮：橙色按钮

这是 mu CSS 代码：

#banneroverlaping > a:link, #banneroverlaping > a:visited{
color: white;
padding: 5px 5px 5px 5px;
background: #FA733B;
background: -moz-linear-gradient(-45deg,  #FA733B 0%, #FA733B 50%, #FF501C 51%, #FF501C 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#FA733B), color-stop(50%,#FA733B), color-stop(51%,#FF501C), color-stop(100%,#FF501C));
background: -webkit-linear-gradient(-45deg,  #FA733B 0%, #FA733B 50%,#FF501C 51%,#FF501C 100%);
background: -o-linear-gradient(-45deg,  #FA733B 0%, #FA733B 50%,#FF501C 51%,#FF501C 100%);
background: -ms-linear-gradient(-45deg,  #FA733B 0%, #FA733B 50%,#FF501C 51%,#FF501C 100%);
background: linear-gradient(135deg,  #FA733B 0%, #FA733B 50%,#FF501C 51%,#FF501C 100%);
}

所以我明白了：

橙色按钮 2

如您所见，两种颜色之间的切割不是从角落开始，而是从中心开始。所以我的问题是我如何编码它来复制原始图像？？？

提前致谢

我使用这个网站建立我的代码

4

2 回答 2

2

我创建了一个与按钮高度和宽度相同的白色直角三角形，alpha 级别为 70%，并将其放置为背景图像

background: url(file:///home/juanpa/Public/a/img/Ontario.png) left no-repeat;
于 2013-05-26T05:20:40.790 回答
0

此渐变适用于方形框：

background-image: -webkit-linear-gradient(4% 0%, rgb(62,203,103) 48%, rgb(93,244,134) 57%);

background-image: -webkit-gradient(
    linear,
    4% 0%,
    left bottom,
    color-stop(0.48, rgb(62,203,103)),
    color-stop(0.57, rgb(93,244,134))
);

现在xStart is 4% and yStart=0% 您可以更改 xStart 以逆时针移动渐变。0.48 或 48% 是顶部的颜色（在这个 css 中是深绿色），57% 是浅绿色。您可以相应地进行调整....如果色标的比率为 1，例如 57% 和 57%，那么您将有一条线将两个渐变分开。如果不是，取决于哪个更大，它会尝试融入价值较低的那个

于 2013-05-25T00:17:41.340 回答