代码之家 › 专栏 › 技术社区 › Tobias Kopelke

ngStyle中的AngularJS多重背景

ng-style linear-gradients angularjs css

Tobias Kopelke · 技术社区 · 12 年前

我试图使用角度向元素应用渐变,但未能使用 ngStyle .

在示例中,我使用的是 style="{{css}}" ,这不是所描述的推荐方法 in the documentation (简短版本,步骤5)。它不会在IE中呈现<=11

如果我尝试使用 ng-style="css" 设置如下:

$scope.css = {
  background: '-webkit-linear-gradient(' + gradient + ')',
  background: '-moz-linear-gradient(' + gradient + ')'
  â¦
}

你会看到明显的问题 css 对象只能包含 background .

我想不出有多少情况下我必须使用这样的浏览器前缀。AngularJS是否以任何方式解决此问题,或者是否存在IE<=11解决方案?

1 回复 | 直到 12 年前

caffeinated.tech 12 年前

这是一个有趣的问题,我认为目前还不存在解决方案,尽管在IE 10之前,梯度并不存在,但可能存在解决方案:

对于IE 10、9&8您可以使用此选项,因为不存在冲突。

$scope.css = {
   '-ms-filter' : "progid:DXImageTransform.Microsoft.gradient ("+iegradient+")",
   'background' : "linear-gradient("+gradient+")"
};

虽然 style="{{css}}" 将适用于所有其他现代浏览器(即包括两者 style 和 ng-style ).

注: 我假设 style={{}} 将在<第11页

如果这对您不起作用,您可以始终创建一个专门用于背景渐变的指令。如果你需要帮助,请在评论中告诉我。

推荐文章

swastij · 如何在颤振中创建垂直线性梯度?

3 年前

Randy Hall · 六边形CSS背景

8 年前

mjpramos · 鼠标移动时页面背景渐变变化

8 年前

Honza Synek · 带3个方向的css背景

8 年前

mleroy · 我无法让连续的画布矩形在js中具有重复的线性渐变。有人知道怎么做吗?

8 年前

David · 如何在CSS中悬停时使用渐变滑入和滑出按钮动画

8 年前

Harry Francis · 90度线性渐变上的不均匀边缘

8 年前

paulcook · CSS带渐变遮罩的垂直滚动字幕

8 年前

Pallas Aleksander · IE和Firefox中的渐变应用于背景,而不是文本

9 年前

user2860957 · 线性梯度和背景尺寸加上这种酷炫效果,任何人都能解释吗

9 年前