CSS 未应用于 ASP.NET 中的 img

Question

我正在创建一个 ASP.NET MVC 项目，并尝试将一些 CSS 应用于图像。

项目结构

这是代码：

//Index.cshtml.css
h1 {
    color: green
}

.roundImage {
    border-radius: 50px;
}

#profilePhoto {
    width: 200px;
    margin: 2rem 0;
    border-radius: 50%;
}

//Index.cshtml
<div class="text-center">
    <h1 class="display-4">My name</h1>
    <img class='roundImage' id="profilePhoto" src="~/images/me.jpg" alt="Profile photo" />
</div>

h1 的颜色正在应用，但我已经尝试了 img 的两种方法，但没有成功。这是为什么？我该如何解决它？

Answer 1

cshtml.css 将添加一个范围标识符： 您可以在浏览器中打开开发人员模式，然后看到 h1 标签正在使用绿色。

但是你会看到 CSS 样式带有 id [b-34vq99bu2v]

这就是 CSS 不适用于图像的原因。

您可以在 img 中添加范围 id，例如：

<div class="text-center">
    <h1 class="display-4">My name</h1>
    <img b-34vq99bu2v class='roundImage' id="profilePhoto" src="~/images/ILTW.png" alt="Profile photo" />
</div>

然后就可以了。