Question

目前，它是Image上的蓝色图标。例如，当我在Image上查看第二个Image时，我想要一个可笑的图标

所以我要在图片下方点赞。

.outer-div-for-the-imgae-icon{position:unset; display:block;  width:100%; height:auto;   }

.outer-div-for-the-imgae-icon img{max-height:300px; width:100%; max-width:300px; height:auto; position : relative;  object-fit:cover;}

.outer-div-for-the-imgae-icon i{position:absolute; top:0; left:100%; font-size:40px;}

<div class="outer-div-for-the-imgae-icon">
                            <app-image [imagesrc]="imagePath" style="width : 38%; margin-top: 30px;"
                                class="d-none d-sm-block" alt="..."></app-image>
                            <i (click)="openImageUploadModal(content)" style="color : white;left:37%; 
                            position: absolute; top: 24px; padding: 3px; background-color:#0076C8; 
                            border-radius: 50%;font-size: 12px;"
                                class="fa fa-pencil fa-lg" aria-hidden="true"></i>
                        </div>

Answer 1

我在下面添加代码以供参考。您可以使用CSS规则更改外观。

.outer-div-for-the-imgae-icon{position:relative; display:block;  width:300px; height:300px; background-color:#efefef  }

.outer-div-for-the-imgae-icon img{max-height:300px; width:100%; max-width:300px; height:auto; position : relative;  object-fit:cover;}

.outer-div-for-the-imgae-icon i{position:absolute; bottom:0px; left:0px;right:0px;top:auto; font-size:40px;height:100px;width:100%;background-color:rgba(0,0,0,0.3); color:#fff; font-size:12px; line-height:25px; padding:25px;box-sizing:border-box;}

<div class="outer-div-for-the-imgae-icon">
                            <app-image [imagesrc]="imagePath" style="width : 38%; margin-top: 30px;"
                                class="d-none d-sm-block" alt="..."></app-image>
                            <i (click)="openImageUploadModal(content)" style=""
                                class="fa fa-pencil fa-lg" aria-hidden="true">Edit Profile Picture</i>
                        </div>

Answer 2

您需要将其添加到图标中，或者将事件添加到保存它的元素的更好方式：

cursor: 'pointer'

使它看起来像一个可单击的元素，但是请注意，有关单击的所有登录信息（如按钮被点赞时将发生的情况）都将使用javascript处理，而css是一种样式设置元素的方法

如何使鼠标悬停在图像上的可点击图标

2 个答案: