如何显示文件夹图标的图像像windows操作系统在剃刀mvc

本文关键字：windows 图像 操作系统 mvc 剃刀 图标 何显示 显示 文件夹 | 更新日期: 2023-09-27 17:53:12

图库

在我的应用程序中，我有一个要求，当用户单击文件夹图标时，我会显示图像，但我不想使用普通的文件夹图标，我想将其显示为windows操作系统图片文件夹(图像将与文件夹一起显示(。

<div class="gallery-view">
    <img src="folderimage.png" onclick="getImages()"/>
</div>
<div class="show-images">
    <img src="image1"/><br/>
    <img src="image2"/>
</div>

如何显示文件夹图标的图像像windows操作系统在剃刀mvc

您可以使用CSS创建文件夹形状，然后将背景图像属性设置为集合中的第一个图像。

CSS：

.folder {
    width: 150px;
    height: 105px;
    margin: 0 auto;
    margin-top: 50px;
    position: relative;
    background-size: 100%; 
    background-image : url("http://weknowyourdreams.com/images/space/space-04.jpg");
    border-radius: 0 6px 6px 6px;
    box-shadow: 4px 4px 7px rgba(0, 0, 0, 0.59);
}
.folder:before {
    content: '';
    width: 50%;
    height: 12px;
    border-radius: 0 20px 0 0;
    background-color: #708090;
    position: absolute;
    top: -12px;
    left: 0px;
}

小提琴

相关文章：