7

我似乎无法将我的 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;

索引.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>
4

6 回答 6

17

您要么使用：

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演示（以防您在使用相对路径引用图像时遇到问题）。

于 2012-12-19T03:40:09.827 回答
4

最重要的

请记住，相对 URL 是从样式表的 URL 解析的。

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;
于 2012-12-19T03:40:15.990 回答
3

如果这确实是您的 CSS 文件中的全部内容，那么是的，什么都不会发生。您需要一个选择器，即使它很简单body：

body {
    background-image: url(...);
}
于 2012-12-19T03:39:29.827 回答
3

尝试这个：

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

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

于 2012-12-19T03:39:41.870 回答
1

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

  1. 按CTRL+U查看页面 Source 。按CTRL+F在 source 中找到“mystyles.css”。单击 mystyles.css 链接并检查它是否未显示“404 not found”。

  2. 您可以在 FIRBUG 中检查元素并将路径设置为图像，设置图像高度和宽度，因为有时图像不显示。

希望这可能有效！

于 2012-12-19T04:28:19.380 回答
0 
    <style>
    background: url(images/Untitled-2.fw.png);
background-repeat:no-repeat;
background-position:center;
background-size: cover;
    </style>
于 2013-10-05T12:33:09.797 回答