Question

您好我在网站上添加了允许用户更改背景的按钮。

我正在尝试使用Angular进行背景更改。

到目前为止，我已经成功地改变了几种方式的背景颜色（改为单色和渐变）...但是，我试图用一个按钮改变背景图像而另一个按钮我是尝试同时更改背景渐变和背景大小。

这是我到目前为止所做的步骤：

<body ng-style="myStyle">
- 成功： <input type="button" class="bg stripes" ng-click="myStyle={background: 'red'}">
- 失败： <input type="button" class="bg numbers" ng-click="myStyle={background-image:'url(../images/count2.png)'}">
- 成功： <input type="button" class="bg stripes" ng-click="myStyle={background:'linear-gradient(45deg, #379690 25%, #3aa19b 25%, #3aa19b 50%, #379690 50%, #379690 75%, #3aa19b 75%, #3aa19b)'}">
- 失败： <input type="button" class="bg stripes" ng-click="myStyle={background:'linear-gradient(45deg, #379690 25%, #3aa19b 25%, #3aa19b 50%, #379690 50%, #379690 75%, #3aa19b 75%, #3aa19b)',background-size:'100px 100px'}">

请帮忙！非常感谢！

Answer 1

您的语法有问题。您需要在引号中包含background-image键，否则它不是有效的标识符。它与background一起使用，因为只有字母字符，它不需要引号。

<input type="button" class="bg numbers" ng-click="myStyle={'background-image': 'url(../images/count2.png)'}">

然后它会正常工作：

angular.module('demo', [])

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>

<body ng-app="demo" ng-style="myStyle">

  <input type="button" class="bg numbers" ng-click="myStyle={'background-image': 'url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/dark_embroidery.png)'}" value="Set background">

</body>

Answer 2

您不必每次都重新定义man grep对象。

在您的ng-click中，您可以

myStyle

你可以摆弄这个fiddle。

如何通过单击Angular Js中的按钮来更改正文背景图像？

2 个答案: