如何在 razor mvc 中显示带有 Windows 操作系统等图像的文件夹图标答案

【问题标题】：How to show folder icon with images like windows operating system in razor mvc如何在 razor mvc 中显示带有 Windows 操作系统等图像的文件夹图标
【发布时间】：2016-06-30 06:14:44
【问题描述】：

图库

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

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

【问题讨论】：

你可以使用来自Shell32.dllstackoverflow.com/questions/6872957/…的图标

标签： javascript c# asp.net-mvc

【解决方案1】：

您可以使用 CSS 创建文件夹形状，然后将 background-image 属性设置为集合中的第一张图片。

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

fiddle

【讨论】：