asp.net-mvc 如何使用 MVC(4) 创建(图像)标题徽标

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12690687/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-08 02:18:41  来源:igfitidea点击:

How to create an (image) Header logo with MVC(4)

asp.net-mvcrazorheaderactionlinkgraphical-logo

提问by RocketRon

I'm struggling with an Razor syntax with MVC (4), hoping to find someone who can help me with a nice and working solution.

我正在为 MVC (4) 的 Razor 语法苦苦挣扎,希望能找到可以帮助我提供一个不错且有效的解决方案的人。

I want a clickable logo(image) and created the following code. This works except of two things. I don't see the image display and secondly, when in an other controller, the routing goes wrong (http4 error).

我想要一个可点击的徽标(图像)并创建了以下代码。除了两件事外,这有效。我没有看到图像显示,其次,在其他控制器中时,路由出错(http4 错误)。

This is how i've done it now:

这就是我现在所做的:

Razor:

剃刀:

<h1>@Html.ActionLink("siteHeader", "Index", null, new { @class = "site-logo"})</h1>

OR

或者

<h1>@Html.ActionLink("siteHeader", "Index", "Home", new { @class = "site-logo"})</h1>

e.g. when in a different controller (account/shoppingcart/etc.) and clicking the logo, it results in a 404.

例如,当在不同的控制器(帐户/购物车/等)中并单击徽标时,会导致 404。

CSS:

CSS:

/Site HeaderLogo/

/网站标题标志/

a.site-logo  {     
 background: url(images/Solosoft.png) no-repeat top left;
 display: block;       
 width: 100px;       
 height: 100px;       
 text-indent: -9999px;  /*hides the link text*/ 
  } 

Thanks in advance.

提前致谢。

采纳答案by webdeveloper

Try this:

尝试这个:

@Html.ActionLink("siteHeader", "Index", "Home", null, new { @class = "site-logo"})

This is:

这是:

public static MvcHtmlString ActionLink(
    this HtmlHelper htmlHelper,
    string linkText,
    string actionName,
    string controllerName,
    Object routeValues,
    Object htmlAttributes
)

Link: msdn

链接:msdn

回答by RoiAbrazaldo

I got the problem cause!

我得到了问题的原因!

theres nothing wrong with our coding, the thing is theres a class that overrides our image set

我们的编码没有任何问题,问题是有一个类覆盖了我们的图像集

theres this lines in Site.css

在 Site.css 中有这行

.site-title a, .site-title a:hover, .site-title a:active {
    *background: none;* <=comment this out and the bg will show or remove the .site-title a
    color: #c8c8c8;
    outline: none;
    text-decoration: none;
}

hope it helps

希望能帮助到你

回答by Nandini

What wizzardz said is correct. Background style in custom css file is overridden by styles in site.css.

wizzardz 说的是对的。自定义 css 文件中的背景样式被 site.css 中的样式覆盖。

Try this, !important- used to give priority to styles to appear in webpage.

试试这个,!important- 用于优先显示在网页中的样式。

In your custom.css page,

在您的 custom.css 页面中,

a.site-logo  {     
     background: url(images/Solosoft.png) no-repeat top left **!important**;
     display: block;       
     width: 100px;    
     height: 100px;       
     text-indent: -9999px;  /*hides the link text*/ 
} 

No need to change anything in site.css

无需更改 site.css 中的任何内容