Question

我似乎无法在我的任何页面上制作我的plaid.jpg背景，更不用说所有这些了，我已经尝试通过body，html，*，“home”的具体ID来选择它。什么都行不通图像为300 x 421像素。我不需要它显示漂亮，我只是希望它出现在一切背后。我的css怎么看这个？ plaid.jpg图片位于我的images文件夹中与index.html文件位于同一目录中。此链接位于index.html文件的顶部。我的样式表位于名为mystyles.css的样式表文件夹中。

<link rel="stylesheet" type="text/css" href="stylesheets/mystyles.css">

我试图以我认为可想象的方式改变我的.CSS文件。前30个谷歌搜索结果“背景图像没有显示”，但没有一个工作。我知道这可能很简单。

mystyles.css是最基本的形式，没有选择器。

  background-image: url("images/plaid.jpg") no-repeat;

的index.html

 <body>
        <!-- Page: home -->
            <div id="home"
                data-role="page"
                data-title="Home">
                <div data-role="header"
                    data-position="fixed"
                    data-theme="b">
                    <h1>Home</h1>
                    <a href="#info"
                        data-icon="info"
                        data-iconpos="notext"
                        data-rel="dialog"
                        class="ui-btn-right"
                        >Info</a>
                </div><!-- header -->
                <div data-role="content">

                <div data-role="controlgroup" data-theme="e">
                    <a href="#blog" 
                        data-role="button"
                        data-icon="arrow-r"
                         data-theme="e"
                    >Blog</a>
                    <a href="#videos" 
                        data-role="button"
                        data-icon="arrow-r"
                         data-theme="e"
                    >Videos</a>
                    <a href="#photos" 
                        data-role="button"
                        data-icon="arrow-r"
                         data-theme="e"
                    >Photos</a>
                    <a href="#tweets" 
                        data-role="button"
                        data-icon="arrow-r"
                         data-theme="e"
                    >Tweets</a>
                </div><!-- links -->
                </div> <!-- content -->
            </div><!-- page -->

这不成功

body {
    background-image: url("/images/plaid.jpg");
    background-repeat: no-repeat;
}

这也是我的

<head>
    <meta charset="utf-8" />
    <title>Mob App</title>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

    <link rel="shortcut icon" href="images/favicon.ico" /> 

    <!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />-->
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

    <script src="javascripts/myscript.js"></script>
    <link rel="stylesheet" type="text/css" href="stylesheets/mystyles.css" />
    </head>

Answer 1

您可以使用：

background-image: url("images/plaid.jpg");
background-repeat: no-repeat;

......或

background: transparent url("images/plaid.jpg") top left no-repeat;

......但最终不

background-image: url("images/plaid.jpg") no-repeat;

编辑：使用绝对路径演示 JSFIDDLE （如果您在使用相对路径引用图片时遇到麻烦）。

Answer 2

最重要的

请注意，相对网址是从样式表的网址中解析的。

如果文件夹images在stylesheets文件夹中，它将起作用。

根据您的描述，您需要将其更改为

url("../images/plaid.jpg")

或

url("/images/plaid.jpg")

附加1

你也不能没有选择器..

CSS通过选择器应用..

附加2

您应该使用简写background来传递多个这样的值

background: url("../images/plaid.jpg") no-repeat;

或详细指定每个属性的详细语法

background-image: url("../images/plaid.jpg");
background-repeat:no-repeat;

Answer 3

如果这真的是你的CSS文件中的所有内容，那么是的，什么都不会发生。你需要一个选择器，即使它就像body一样简单：

body {
    background-image: url(...);
}

Answer 4

试试这个：

body
{ 
    background:url("images/plaid.jpg") no-repeat fixed center;
}

jsfiddle示例：http://jsfiddle.net/Q9Zfa/

Answer 5

您可以使用两种方式进行调试：

按 CTRL + U 查看页面来源。按 CTRL + F 在源代码中查找“mystyles.css”。点击mystyles.css链接，检查它是否显示“404 not found”。
您可以检查ELBUG中的元素并设置图像路径，设置图像高度和宽度，因为有时图像不会显示。

希望这可能有效!!。

Answer 6

    <style>
    background: url(images/Untitled-2.fw.png);
background-repeat:no-repeat;
background-position:center;
background-size: cover;
    </style>

background-image：url（“images / plaid.jpg”）no-repeat;不会出现

6 个答案: