将不透明度设置为除所选平铺之外的所有平铺
将不透明度设置为除所选平铺之外的所有平铺
提问于 2016-07-26 02:13:57
我注意到有几个问题与这个问题相似，但并不完全相同。我正在使用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();
}
};较少
#overlay {
position: relative;
cursor: pointer;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.4);
}回答 1
Stack Overflow用户
回答已采纳
发布于 2016-07-26 02:19:50
我认为最简单的方法就是在CSS/LESS文件中创建一个类，如下所示：
.faded {
opacity: 0.5;
}然后你需要做的就是将faded附加到你想要淡入淡出的img的类值上。
这通常是更改多个元素的不透明度的最好、最简单的方法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38574762
复制相关文章
相似问题
腾讯云开发者
