具有图像和线性渐变的多个背景的属性值无效答案

【问题标题】：Invalid property value for multiple backgrounds with image and linear-gradient具有图像和线性渐变的多个背景的属性值无效
【发布时间】：2014-07-18 00:55:37
【问题描述】：

我正在尝试设置具有多个背景（一个图像和一个线性渐变）的选择元素。它在我开发时工作，但由于某种原因，它在投入生产时停止工作。

这是我开始使用的代码（在 SCSS 中）：

$select-arrow-uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAICAYAAAAvOAWIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkExMjY4NTZGRTdCNTExRTNCOEJDRDIyQTAwRDQ5MzU2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkExMjY4NTcwRTdCNTExRTNCOEJDRDIyQTAwRDQ5MzU2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTEyNjg1NkRFN0I1MTFFM0I4QkNEMjJBMDBENDkzNTYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTEyNjg1NkVFN0I1MTFFM0I4QkNEMjJBMDBENDkzNTYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4L3nSlAAAAm0lEQVR42mL4//8/AwinpKQowtjIGCguB2MzMQBBampqF5A6D6TNGJAAkG8DpK4C6UYQnxGo0xhInwRiZiD+CMRus2fPPgVVuB2IeYD4FxAbMoKMB0rEAjnzkTRUAnEXksJooAFrwIqhViYAqTlQDTAAVwh2Bkwxkob5UO5fII6AKQQBJmQPASUWAKlEqMJoZIVgQCi4kDFAgAEAFOFxgtML2dkAAAAASUVORK5CYII=';

select{
    background-color: #f5f5f5;
    background-image: url("#{$select-arrow-uri}");
    background-image: url("#{$select-arrow-uri}"), -webkit-linear-gradient(bottom, #e5e5e5 0%, #f5f5f5 100%);
    background-image: url("#{$select-arrow-uri}"), linear-gradient(#e5e5e5 0%, #f5f5f5 100%);
    background-position: 95% center;
    background-repeat: no-repeat;
}

这就是它在浏览器中的显示方式：

background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAICAYAAAAvOAWIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkExMjY4NTZGRTdCNTExRTNCOEJDRDIyQTAwRDQ5MzU2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkExMjY4NTcwRTdCNTExRTNCOEJDRDIyQTAwRDQ5MzU2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTEyNjg1NkRFN0I1MTFFM0I4QkNEMjJBMDBENDkzNTYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTEyNjg1NkVFN0I1MTFFM0I4QkNEMjJBMDBENDkzNTYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4L3nSlAAAAm0lEQVR42mL4//8/AwinpKQowtjIGCguB2MzMQBBampqF5A6D6TNGJAAkG8DpK4C6UYQnxGo0xhInwRiZiD+CMRus2fPPgVVuB2IeYD4FxAbMoKMB0rEAjnzkTRUAnEXksJooAFrwIqhViYAqTlQDTAAVwh2Bkwxkob5UO5fII6AKQQBJmQPASUWAKlEqMJoZIVgQCi4kDFAgAEAFOFxgtML2dkAAAAASUVORK5CYII=) 95% center no-repeat,
linear,to bottom,#e5e5e5,#f5f5f5;

当我使用线性渐变删除背景图像规则时，它工作正常。 -webkit-linear-gradient 线没有任何问题，只有 linear-gradient 线。

有语法问题吗？ Sass 会编译怪异吗？ URI字符串有问题吗？

请帮忙！谢谢！

【问题讨论】：

嗯，这是一个难题。我尝试编译和构建它，一切正常。您的编译器是否将 sass 文件中 select 下的所有内容组合成 background 速记？
您的建议让我走上了正确的道路。看看我的回答。谢谢！

标签： css google-chrome sass gradient linear-gradients

【解决方案1】：

想通了。我已经加载了 Bourbon 库，并且有一个用于线性渐变的函数，它可以与 background-image mixin 一起使用，并且在不使用 background-image mixin 的情况下使用。我切换到 background-image mixin 让它工作，但我可能会向他们报告这个。不酷的波旁威士忌。

【讨论】：