Question

我正在尝试创建一个带有渐变的跨度和一个右侧的背景图像。现在我已经搜索了很长时间，并且一直在添加代码片段。在我测试IE8之前，一切正常。我在堆栈溢出时发现的与我的问题相关的已回答的问题仍然无效。这是代码：

background: #FFFFFF;
background-image: url(../images/selectArrows.png) center center no-repeat; /* fallback */
background-image: url(../images/selectArrows.png), -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ededed)); /* Saf4+, Chrome */
background-image: url(../images/selectArrows.png), -webkit-linear-gradient(top, #ffffff, #ededed); /* Chrome 10+, Saf5.1+ */
background-image: url(../images/selectArrows.png),    -moz-linear-gradient(top, #ffffff, #ededed); /* FF3.6+ */
background-image: url(../images/selectArrows.png),     -ms-linear-gradient(top, #ffffff, #ededed); /* IE10 */
background-image: url(../images/selectArrows.png),      -o-linear-gradient(top, #ffffff, #ededed); /* Opera 11.10+ */
background-image: url(../images/selectArrows.png),         linear-gradient(to bottom, #ffffff, #ededed); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#FFFFFF", endColorstr="#ededed",GradientType=0 ), progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/selectArrows.png");
background-repeat: no-repeat;
background-position: 100% 50%;

Answer 1

我建议你使用这个很棒的背景编辑器：http://www.colorzilla.com/gradient-editor/

您可以上传selectArrows.png并从中导入背景。它将为您提供可以使用的确切css，跨浏览器！

IE8渐变和图像

1 个答案: