目录
目录X
联系信息 首页 /正文内容

CSS中引用Razor动态Logo url地址处理解决

AI摘要(BLUF)
@StringExtensionsHelper.ToUrl(this.Context.GetCurrentSite().LogoUrl) 只能在 Razor / cshtml / HTML 模板中执行,而 .css 文件是静态文件,不会解析 @ 代码。所以必须把 动态 URL 放到 HTML 或 Razor 里生成,然后再给 CSS 使用。下面是几种正确方式。方法一(推荐):在 Razor 中写 style如果这是 .cshtml 页面,可以这样写:<style>.s-logo{background:url('@StringExtensionsHelper.ToUrl(this.C……

@StringExtensionsHelper.ToUrl(this.Context.GetCurrentSite().LogoUrl) 只能在 Razor / cshtml / HTML 模板中执行,而 .css 文件是静态文件,不会解析 @ 代码。

所以必须把 动态 URL 放到 HTML 或 Razor 里生成,然后再给 CSS 使用。

下面是几种正确方式。


方法一(推荐):在 Razor 中写 style

如果这是 .cshtml 页面,可以这样写:

<style>
.s-logo {
    background: url('@StringExtensionsHelper.ToUrl(this.Context.GetCurrentSite().LogoUrl)') no-repeat left center;
    padding: 0;
    width: 510px;
    height: 60px;
}
</style>

注意:

  1. url() 里面用 单引号

  2. Razor 代码在 HTML 中解析


方法二:直接写在 HTML 元素 style

<div class="logo"  style="background:url('@StringExtensionsHelper.ToUrl(this.Context.GetCurrentSite().LogoUrl)') no-repeat left center;"></div>

方法三(更规范):用 <img> 显示 Logo

如果只是显示 Logo,其实不需要 background。

<div class="s-logo">
    <img src="@StringExtensionsHelper.ToUrl(this.Context.GetCurrentSite().LogoUrl)" />
</div>

CSS:

.s-logo.sm img{
    width:510px;
    height:60px;
}


【打印正文】 发布时间:2026-08-21 17:12:05 浏览次数: 作者: 来源:本站原创