通过样式标签或外部样式表文件,我可以使用以下内容来支持各种浏览器:
#divID {
background: rgb(30,87,153); /* Old browsers */
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C */
}
我有一个页面,用户可以在其中使用 slider 设置渐变参数。如果我尝试这样的事情,背景 css 属性将被 css jquery setter 设置的下一个值覆盖:
$("#divID").css({background:"-moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);"});
$("#divID").css({background:"-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1)));"});
...etc
无论如何,我可以用 javascript 或 jQuery 完成与用 css 完成的相同的事情吗?
最佳答案
下面的方法应该有效:
var bgWebKit = "-webkit-gradient(linear, " + ...;
var bgMoz = "-moz-linear-gradient(" + ...;
$('#divID')
.css({ background: bgWebKit })
.css({ background: bgMoz });
根据 this source
关于jquery - 通过 jQuery 生成 css3 渐变时如何实现跨浏览器支持,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7261910/