Question

我有一段时间试图编码图像，这与html和css文件位于同一目录中。我的标记图像的子弹点工作没有问题，但我的标题的背景图像似乎不起作用。我通过css验证器运行它，没有任何显示。

编辑：我想知道我的图像正在加载，我想要完成的是弄清楚如何将我的图像叠加在h1元素之上。

HTML5：

<!DOCTYPE html>

<head>
    <link style = "text/css" rel ="stylesheet" href = "pacific.css">
    <title>Pacific Trails Resort</title>
    <meta Charset="utf-8">

</head>

<body>
    <header>
        <h1>Pacific Trails Resort</h1>
    </header>

    <nav>
        <a href = "index.html">Home</a>
        &nbsp;
        <a href = "yurts.html">Yurts</a>
        &nbsp;
        <a href = "activities.html">Activities</a>
        &nbsp;
        <a href = "reservations.html">Reservations&nbsp;</a>
    </nav>

    <main>
        <h2>Enjoy Nature In Luxury</h2>

        <img src = "coast.jpg" alt = "Pacific Trails Resort" height = "250" width = "320">

        <p><span class = "resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast. 
        Relax in serenity with panoramic views of the Pacific Ocean.</p>

        <ul>
            <li>Private yurts with decks overlooking the ocean</li>
            <li>Activities lodge with fireplace and gift shop</li>
            <li>Nightly fine dining at the Overlook Cafe</li>
            <li>Heated outdoor pool and whirlpool</li>
            <li>Guided hiking tours opf the redwoods</li>
        </ul>

        <div>
            <span class ="resort">Pacific Trails Resort</span>
            <br>
            12010 Pacific trails Road
            <br>
            Zephyr, CA 95555
            <br>
            <br>
            888-555-5555
            <br>
        </div>

        <br>

    </main>

    <footer>
        Copyright &copy; 2016 Pacific Trails Resort
        <br>
        <a href = "mailto:email@address.com">Contact Ian Rosenberg</a>
    </footer>

</body>

CSS：

body{background-color: #FFFFFF; color: #666666; font-family: Arial, Helvetica, sans-serif}

header{ background-image: url('sunset.jpg');
background-position: right; 
background-repeat: no-repeat;
line-height: 400%;
text-indent: 1em;}

h1{background-color: #000033; 
color: #FFFFFF}

nav{background-color: #90C7E3;
font-weight: bold}

nav a{text-decoration: none}

h1{margin-bottom: 0;
font-family: Georgia, Times New Roman, serif}

h2{color: #3399CC;
font-family: Georgia, Times New Roman, serif}

h3{font-family: Georgia, Times New Roman, serif}

ul{list-style-image: url("marker.gif")}

dt{color: #000033}

footer{font-size: 70%;
font-style: italic;
text-align: center;
font-family: Georgia, Times New Roman, serif}

.resort{color: #5C7FA3;
font-weight: bold}

#contact{font-size: 90%}

Answer 1

你的背景正在加载它刚隐藏的。您看到的问题是，您的H1元素覆盖了整个背景，因为它的显示设置为block（这是H1元素的默认值。

我不确定您希望它如何显示，但您有很多选择。您可以从background-color css定义中删除H1。这将使背景出现。 DEMO

或者，您可以将display元素的H1更改为inline-block或inline，具体取决于您的要求。 DEMO

最后，您可以设置标题类的height，但仍然允许显示H1的背景颜色。 DEMO

这些还有一些可能性，还有很多其他方法可以改变它。我不知道你的最终设计目标是什么，所以你必须确定下一步。但这就是为什么你看不到背景的原因。

注意：我在前两个CSS中更改了H1类。如果你确实采用这条路线，我建议您更准确地定位H1因为我认为您不希望应用于其他H1的{{1}}标题具有相同的样式在你的页面中。我这样做只是为了说明你如何解决它。

Answer 2

删除你的h1颜色样式，它覆盖了背景图片样式。也是你的.nav颜色规则。使用firebug或chromes检查元素来完成你的风格，看看哪些是最重要的。您可以关闭和打开各种样式以查看哪些有效。

＆＃13;

body {
  background-color: #FFFFFF;
  color: #666666;
  font-family: Arial, Helvetica, sans-serif
}

header {
  background-image: url(http://fandom.wikia.com/wp-content/uploads/2016/09/Arrowverse.jpg);
  background-position: right;
  background-repeat: no-repeat;
  line-height: 400%;
  text-indent: 1em;
}

h1 {
  /* remove this 
  background-color: #000033; */
  
  color: #FFFFFF
}

nav {
 
  background-color: #90C7E3;

  font-weight: bold
}

nav a {
  text-decoration: none
}

h1 {
  margin-bottom: 0;
  font-family: Georgia, Times New Roman, serif
}

h2 {
  color: #3399CC;
  font-family: Georgia, Times New Roman, serif
}

h3 {
  font-family: Georgia, Times New Roman, serif
}

ul {
  list-style-image: url("sqpurple.gif")
}

dt {
  color: #000033
}

footer {
  font-size: 70%;
  font-style: italic;
  text-align: center;
  font-family: Georgia, Times New Roman, serif
}

.resort {
  color: #5C7FA3;
  font-weight: bold
}

#contact {
  font-size: 90%
}

＆＃13;

<header>
  <h1>Pacific Trails Resort</h1>
</header>

<nav>
  <a href="index.html">Home</a> &nbsp;
  <a href="yurts.html">Yurts</a> &nbsp;
  <a href="activities.html">Activities</a> &nbsp;
  <a href="reservations.html">Reservations&nbsp;</a>
</nav>

<main>
  <h2>Enjoy Nature In Luxury</h2>

  <img src="coast.jpg" alt="Pacific Trails Resort" height="250" width="320">

  <p><span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast. Relax in serenity with panoramic views of the Pacific Ocean.</p>

  <ul>
    <li>Private yurts with decks overlooking the ocean</li>
    <li>Activities lodge with fireplace and gift shop</li>
    <li>Nightly fine dining at the Overlook Cafe</li>
    <li>Heated outdoor pool and whirlpool</li>
    <li>Guided hiking tours opf the redwoods</li>
  </ul>

  <div>
    <span class="resort">Pacific Trails Resort</span>
    <br> 12010 Pacific trails Road
    <br> Zephyr, CA 95555
    <br>
    <br> 888-555-5555
    <br>
  </div>

  <br>

</main>

<footer>
  Copyright &copy; 2016 Pacific Trails Resort
  <br>
  <a href="mailto:rosenberg.ian@student.ccm.edu">Contact Ian Rosenberg</a>
</footer>

＆＃13;

Answer 3

我弄清楚我做错了什么，我所遵循的练习在h1元素上没有背景颜色或颜色属性。为了在背景上显示图像，我将标题代码更改为

header{background-color: #000033; 
    color: #FFFFFF;
    background-position: right; 
    background-repeat: no-repeat;
    line-height: 400%;
    text-indent: 1em;
    background-image: url('sunset.jpg');}

CSS：背景 - 图像不显示？

3 个答案: