css - 在 mvc 中使用图像作为页面的主题

标签 css asp.net-mvc-4

目前我正在运行一个 mvc 应用程序,其中一页我必须使用一个图像作为主题。我尝试用谷歌搜索很多东西,但没有一个主题对我有用。

我从互联网上得到一个例子,其中一张图片用作主题,如下所示:

.intro {
	max-width:100%;
	height:auto;
	position:relative;
	background: url(~/Content/Images/1.jpg) no-repeat bottom-center;
	  background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}
<body>
  <section id="intro" class="intro img-fluid img-responsive">
    </section>
 </body>

这在 html 页面上工作正常,但我在我的一个 View 中使用的相同,但它不起作用。

需要有人帮忙。

最佳答案

尝试改用背景图像。还要检查您是否有权访问图像并向 html 添加一些内容以使背景可见。

.intro {
    max-width: 100%;
    height: auto;
    position: relative;
    background-image: url(http://www.w3schools.com/cssref/paper.gif);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

在你的 Html 正文中

<section id="intro" class="intro img-fluid img-responsive">
    <article>
        <div>Article1</div>
    </article>
    <article>
        <div>Article2</div>
    </article>
    <article>
        <div>Article3</div>
    </article>
</section>

关于css - 在 mvc 中使用图像作为页面的主题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38291299/

相关文章:

javascript - 如果找不到背景图像,如何显示替代图像

CSS 没有生效

css - MVC CSS 默认颜色

asp.net-mvc-4 - 无法解析类型名称 : Glass. Mapper.Sc.Pipelines.Response.GetModel、Glass.Mapper.Sc

c# - 将其显示到 "Table1"表中

html - CSS 未应用于 XUL 窗口 HTML 内容

css - Flexbox - 奇怪的 img 大小问题

c# - 当应用程序池在 ASP.NET MVC 中重新循环时会发生什么?

asp.net-mvc - 最佳实践:在Web api Controller 中处理错误和异常的方法?

asp.net-mvc-4 - session 过期后重定向到特定页面 (MVC4)