0

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

在这里拉小提琴。

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;
}
4

2 回答 2

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%;
}
于 2016-04-18T10:31:49.800 回答
0

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

尝试这个：

在 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'
}

希望这有帮助。

于 2016-04-18T10:24:00.903 回答