Question

我正在创建mvc4应用程序。我想在layout.cshtml中设置背景。问题是，即使在设置background-repeat：no-repeat标签后，我的背景图像仍在重复。我谷歌很多，尝试了不同的方法告诉那里。但他们都没有帮助我。在这方面有什么帮助吗？我的背景图片在我的应用程序中创建的Images文件夹中调整。这是我的layout.cshtml文件的简单代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="bootstrap.css" rel="stylesheet" />
<script src="bootstrap.js"></script>
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body style="background-image:url(Images/blue.jpg)" "background-repeat:no-repeat">


@RenderBody()
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)

Answer 1

按如下方式提供内联样式：

<body style="background-image:url(Images/blue.jpg);background-repeat:no-repeat;">

Answer 2

你的错误就在行中：

<body style="background-image:url(Images/blue.jpg)" "background-repeat:no-repeat">

您使用了太多"。

您需要使用分号来区分一种风格和下一种风格。所以，改为：

<body style="background-image:url(Images/blue.jpg); background-repeat:no-repeat">

让它发挥作用。

旁注

通常避免使用样式内联，因为从css的角度来看会导致多个问题。请尝试在 css文件中设置。

然后你的css会包括：

body{
    background:url(Images/blue.jpg);
    background-repeat: no-repeat;
    background-size:100%; /*if you wanted to 'fill' the page to max size without cropping*/
}

DEMO

完全填补＆＃39;在页面中，您还需要为html添加大小，

DEMO

Answer 3

问题是，您需要将单引号放在url内，而且您也错过了一个正斜杠。 <body style="background-image:url('/Images/blue.jpg'); background-repeat:no-repeat;">

背景图片在cshtml文件中重复

3 个答案: