Question

我正在使用Angularjs在DOM中显示一些图像，并对它们应用一些样式（使背景变暗）。我似乎无法将public function getLogout() { Session::flash('message', 'You have been logged out!'); return $this->logout(); }应用于ng-style标记。这是什么原因？

Fiddle此处。

HTML：

img

CSS：

<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>

Answer 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%;
}

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

希望得到这个帮助。

Angularjs - 无法将ng-style应用于img标记（使用ng-repeat）

2 个答案: