Angularjs - 无法将 ng 样式应用于 img 标签（使用 ng-repeat）答案

【问题标题】：Angularjs - Unable to apply ng-style to img tag (using ng-repeat)Angularjs - 无法将 ng 样式应用于 img 标签（使用 ng-repeat）
【发布时间】：2016-04-18 18:43:50
【问题描述】：

我正在使用 Angularjs 来在 DOM 中显示一些图像，并对它们应用一些样式（使背景变暗）。看来我无法将ng-style 应用于img 标签。这是什么原因？

Fiddle 在这里。

HTML：

<div ng-controller="MyController">
    <div class="row">
        <div class="col-md-4 col-lg-4 col-sm-12 postCon" ng-repeat="post in posts">
          <div class="rel">
             <img src="{{post.link}}" alt="..." class="img-thumbnail" ng-click="test()" ng-style="{'background':'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('+post.link+')','background-size': 'cover'}"> 
          <li class="del">button</li><li class="getLink">get link</li>
          </div>
    </div>
  </div>   
</div>

CSS：

.del{
  font-size: 15px;
  color: black;
  z-index: 10;
  text-decoration: none;
  padding: 5px 10px;
  background-color: white;
  position: absolute;
  left: 0;
  bottom: 0;
}

.getLink{
  font-size: 15px;
  color: black;
  z-index: 10;
  text-decoration: none;
  padding: 5px 10px;
  background-color: white;
  position: absolute;
  right: 0;
  bottom: 0;
}
.rel{
  position: relative;
    height: auto;
    width: auto;
    display: inline-block;
}

【问题讨论】：

请尝试将ng-style改成style
它不起作用，“暗淡”效果不适用于图像。
为什么你没有使用 ng-class
为什么我必须使用ng-class？
@undroid 你想让图片有透明度吗：0.5？

标签： angularjs ng-style

【解决方案1】：

请尝试以下方法：

HTML：

<div ng-controller="MyController">
<div class="row">
    <div class="col-md-4 col-lg-4 col-sm-12 postCon" ng-repeat="post in posts">
      <div class="rel">
        <div class="cover-img">
          <img src="{{post.link}}" alt="..." class="img-thumbnail" ng-click="test()" style="background:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));background-image: url('{{post.link}}');background-size: cover">
        </div> 
      <li class="del">button</li><li class="getLink">get link</li>
      </div>
</div>

CSS：

.del{
  font-size: 15px;
  color: black;
  z-index: 10;
  text-decoration: none;
  padding: 5px 10px;
  background-color: white;
  position: absolute;
  left: 0;
  bottom: 0;
}

.getLink{
  font-size: 15px;
  color: black;
  z-index: 10;
  text-decoration: none;
  padding: 5px 10px;
  background-color: white;
  position: absolute;
  right: 0;
  bottom: 0;
}
.rel{
  position: relative;
    height: auto;
    width: auto;
    display: inline-block;
}

.cover-img{
   position:relative;
}
.cover-img:before{
   content:'';
   background: rgba(69, 71, 94, 0.53);
   position:absolute;
   left:0;
   right:0;
   bottom:0;
   top:0;
   width:100%;
   height:100%;
}

【讨论】：

这仍然不会使图像变暗。
这与角度无关。如果你在这里使用ng-style 也可以。

【解决方案2】：

我不认为ng-style 是如何工作的。您可以查看示例 here 和 here。

试试这个：

在html中：

<img ng-style="yourStyle">

在控制器中：

$scope.yourStyle =
{
    'background': 'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))',
    'background-size': 'cover'
}

希望对您有所帮助。

【讨论】：