將不透明度設置爲除選定的一個之外的所有瓷磚

我注意到有幾個問題與此類似，但不完全相同。我正在使用ng-repeat顯示我已上傳的所有圖像。我可以點擊一個，它會成爲默認圖片。我希望點擊的圖像看起來正常，而其他所有圖像都有overlay。我嘗試在我的selectImage函數中設置$('overlay').hide()，但那隻會從第一張圖像上的HTML中刪除疊加層。關於如何做到這一點的任何想法？將不透明度設置爲除選定的一個之外的所有瓷磚

HTML

<!-- PHOTOS --> 
     <div class="uploads-section" style="width: 100%;"> 
     <md-grid-list md-cols="3" md-row-height="1:1" md-gutter="8px" style="padding-top: 10px;"> 
      <md-grid-tile md-rowspan="1" md-colspan="1"> 
      <div style="background-color: #3F454b; padding: 30px; cursor: pointer; height: 100%; width: 100%;" class="upload-tile no-outline" layout="column" layout-align="center start" ng-click="uploadImage('photo')"> 
       <md-icon style="color: #FFFFFF; width: 40px; height: 40px;" md-svg-icon="images/upload.png"></md-icon> 
       <p class="action-link" style="margin: 0; color: #FFFFFF;">UPLOAD</p> 
      </div> 
      </md-grid-tile> 
      <md-grid-tile ng-repeat="photo in org.attachments | filter:{type:'photo'}" md-rowspan="1" md-colspan="1" style="opacity: .5;"> 
      <div style="width: 100%; height: 100%; position: relative; overflow: hidden;" class="attachment-tile no-outline" layout="row" layout-align="center center" ng-click="selectImage($event, photo)"> 
       <!-- <p class="m1">Loading...</p> --> 
       <img attachment-src="{{ photo.path | ThumbnailFilter }}" default-src="images/no_img.png" style="cursor: pointer; height: 100%; width: 100%; object-fit: cover;"> 
      </div> 
      </md-grid-tile> 
      <md-grid-tile ng-repeat="photo in org.defaultOrgImages | filter:{type:'photo'}" md-rowspan="1" md-colspan="1"> 
      <div style="width: 100%; height: 100%; position: relative; overflow: hidden;" class="attachment-tile no-outline" layout="row" layout-align="center center" ng-click="selectImage($event, photo)"> 
       <!-- <p class="m1">Loading...</p> --> 
       <img attachment-src="{{ photo.path | ThumbnailFilter }}" default-src="images/no_img.png" style="cursor: pointer; height: 100%; width: 100%; object-fit: cover;"> 
       <div id="overlay"></div> 
      </div> 
      </md-grid-tile> 
     </md-grid-list> 
     </div>

控制器

$scope.selectImage = function (ev, attachment) { 
    if (attachment.type == 'photo' && attachment.path != $scope.org.defaultPhoto) { 
    $scope.org.defaultPhoto = attachment.path; 
    saveOrg(); 
    } 
};

LESS

#overlay { 
    position: relative; 
    cursor: pointer; 
    height: 100%; 
    width: 100%; 
    background-color: rgba(0, 0, 0, 0.4); 
}

來源

2016-07-25 daveskylark

我要說到做到這一點最簡單的方法是在你的CSS/LESS文件創建一個類，像這樣：

.faded { 
    opacity: 0.5; 
}

然後，您只需將faded附加到要淡出的img的類值即可。

這通常是改變多個元素不透明度的最好和最簡單的方法。

來源

2016-07-25 18:19:49

是的，這是不工作，因爲我正在使用'ng-repeat'。我希望所有的圖像都被「淡化」，並且選擇正常的圖像。由於'background-color：rgba（0，0，0，0.4）'，我將所有圖像都褪色了。我想要選中的圖像被刪除。 – daveskylark

將不透明度設置爲除選定的一個之外的所有瓷磚

回答

相關問題