0

我正在尝试在我的网站上添加标题。试了无数次，就是记不住正确的方法。当我放一张图片时，它不适合标题的大小（上面写着 Younani Flower 的矩形）。为什么会出现这个问题？我没有留下空白区域，因为图像通常覆盖页面。

网址：http: //younani.com/finalsite/finalindex.html

CSS：

#header {text-align: center;
}




#container {
    width: 960px;
    margin: 0 auto;
     background-color: #FAFAFA;
     color: #003300;
     font-family: Arial, Helvetica, sans-serif; background-image:url('backgroundflower5.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover;

}

#h2 {text-align: center;}

#container {
            width: 960px;
            margin: 0 auto;
        }

        #container div {
            border: 1px solid;
        }


        #header {}


#center2 {
            float: left;
            margin: 10px 0 10px 20px;
            min-width: 200px; width: 494px; border-radius:8px;
        }

#centerO {float: left;
            margin: 10px 0 10px 20px;

            min-width: 200px; font-family: "Comic Sans MS", cursive, sans-serif; background-color: #FFFFFF;
            width: 494px; border-radius:8px; text-align: left; }


        #left,
        #center,
        #right {
            float: left;
            margin: 10px 0 10px 20px;

            min-width: 200px;
        }

        #center {font-family: "Comic Sans MS", cursive, sans-serif; background-color: #FFFFFF;
            width: 494px; border-radius:8px; text-align: center;
        } 

        .clear {
            clear: both;
        }

#right2 {float: left;
            margin: 10px 0 10px 20px; border: 0px;

            min-width: 200px;}

#right { font-family: Impact, Charcoal, sans-serif; border-radius:8px; background-color: #FFFFFF;}

#left a {font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #ffffff;
        display: block;
    padding: 10px 20px;
    background: -moz-linear-gradient(
        top,
        #ffffff 0%,
        #2a07ed);
    background: -webkit-gradient(
        linear, left top, left bottom, 
        from(#ffffff),
        to(#2a07ed));
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    border-radius: 30px;
    border: 3px solid #ffffff;
    -moz-box-shadow:
        0px 3px 11px rgba(000,000,000,0.5),
        inset 0px 0px 1px rgba(026,020,219,1);
    -webkit-box-shadow:
        0px 3px 11px rgba(000,000,000,0.5),
        inset 0px 0px 1px rgba(026,020,219,1);
    box-shadow:
        0px 3px 11px rgba(000,000,000,0.5),
        inset 0px 0px 1px rgba(026,020,219,1);
    text-shadow:
        0px -1px 0px rgba(000,000,000,0.2),
        0px 1px 0px rgba(255,255,255,0.3);
}





figure{}

#left a:link { background-color: #E6E6E6; }
#left a:visited { background-color: #E6E6E6; }
#left a:hover {border: 3px inset #333333; }

#left ul { list-style-type: none;
          margin: 0;
          padding-left: 0; }



#footer { text-align: center; font-family: Audimat;
    clear: both; width:38%;
        border-radius: 8px;
        background-color:white;
        text-align:center; margin-right:auto;
        margin-left:auto; }

主页：

<!DOCTYPE html>

<html lang="en">

<head>

   <title>Younani Flower's</title>

   <meta charset="utf-8">

   <link rel="stylesheet" href="final.css" />
</head>



<body>
<div id="container" class="clearfix"><!-- Header -->
<div id="header">
<h1>Younani Flowers</h1>
</div>
<!-- Left Column -->
<div id="left">
<ul>
<li><a href="finalindex.html">Home</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="occasions.html">Occasions</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</div>
<!-- Center Column -->
<div id="center">
<p><strong>In-store Specials</strong></p>
<p>Dozen Red Roses: $12.99</p>
<p>Bouquet of TEN different garden flowers: $19.99</p>
<p>Small glass vases: $9.99 <br /> Medium glass vases $14.99 <br /> Large glass vases: $19.99</p>
<p></p>
</div>
<!-- Right Column -->
<div id="right">
<p><span style="text-decoration: underline;"><strong>Birth Month Flowers<strong></strong></strong></span></p>
<p>January Carnation</p>
<p>February Iris</p>
<p>March Daffodil</p>
<p>April Daisy</p>
<p>May Lily</p>
<p>June Rose</p>
<p>July Delphinium</p>
<p>August Dahlia</p>
<p>September Aster</p>
<p>October Calendula</p>
<p>November Chrysanthe</p>
<p>December Poinsettia</p>
</div>
<!-- Footer -->
<div id="footer" class="clear">
<div class="nav"><b><a href="finalindex.html">Home</a>&nbsp;&nbsp; <a href="gallery.html">Gallery</a>&nbsp;&nbsp; <a href="occasions.html">Occasions</a>&nbsp;&nbsp; <a href="aboutus.html">About Us</a>&nbsp;&nbsp; <a href="contactus.html">Contact Us</a>&nbsp;&nbsp;</b></div>
</div>
</div>
<!-- #container -->
<p></p>
</body>

</html>
4

1 回答 1

1

如果您按如下方式添加标题背景，它应该可以工作：

#header {
  background-image: url(image_path);
}

如果删除里面的文本，则必须指定标题的尺寸。由于块元素的宽度隐式为 100%，因此您只需指定高度。在我的浏览器中，文本的高度是 81px。

于 2012-12-02T21:26:35.433 回答