当前位置：文江博客话题详情

如何使用 CSS 在网页背景上拉伸标题

发布于 2024-08-22 05:54:07 字数 315 浏览 4 评论 0原文

http://www.stumbleupon.com/

http://www.mixx.com/

这两个网站都有一个背景标题在整个页面上延伸，而内容则居中并覆盖了宽度的 80%，这也与布局的其余部分完美契合。

我对这两个网站特别感兴趣，因为标题有两种背景颜色，而不仅仅是一种。

我确信网络上有大量教程，但我没有要搜索的关键字。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

眼眸里的快感 2024-08-29 05:54:07

分析 stumbleupon.com：

“标题”实际上由两个 div 组成：wrapperHeader 和 wrapperNav。这两个有不同的背景颜色。
这些 div 只有一个具有 CSS 属性的子元素，

margin: 0 auto

这会导致水平居中。

此属性也分配给内容 div，因此标题、导航和内容始终居中。当然，这需要为此元素设置一些宽度。

结构如下所示：

<div id="wrapperHeader">
    <div class="" id="header">
            <!-- mnore stuff here, like logo -->
    </div>  <!-- end header -->
</div>
<div id="wrapperNav">
    <ul id="navMain">
        <li class="discover first"><a href="/discover/toprated/">Discover</a></li>
        <li class="favorites"><a href="/favorites/">Favorites</a></li>
        <li class="stumblers"><a href="/stumblers/onlinenow/">Stumblers</a></li>
    </ul> <!-- end navMain -->  
</div>
<div id="wrapperContent">
    <div class="clearfix" id="content"> 
    </div> <!-- end content -->
</div>

如果您获得 Firebug for Firefox，您可以轻松地自己分析元素。

Analyzing stumbleupon.com:

The "header" consists actually of two divs: wrapperHeader and wrapperNav. Those two have different background colors.
These divs have only one child each that has the CSS property

margin: 0 auto

This results in a horizontal centering.

This property is assigned to the content div too, so the header, navigation and content are always centered. Of course this requires to set some width for this elements.

The structure looks like this:

<div id="wrapperHeader">
    <div class="" id="header">
            <!-- mnore stuff here, like logo -->
    </div>  <!-- end header -->
</div>
<div id="wrapperNav">
    <ul id="navMain">
        <li class="discover first"><a href="/discover/toprated/">Discover</a></li>
        <li class="favorites"><a href="/favorites/">Favorites</a></li>
        <li class="stumblers"><a href="/stumblers/onlinenow/">Stumblers</a></li>
    </ul> <!-- end navMain -->  
</div>
<div id="wrapperContent">
    <div class="clearfix" id="content"> 
    </div> <!-- end content -->
</div>

If you get Firebug for Firefox, you can easily analyze the elements yourself.

回复收藏 0 原文

夏日落 2024-08-29 05:54:07

它的 background-image 设置为 body，属性为 background-repeat：

background-repeat: repeat-x;

编辑：至于居中内容 -我这样做：

<body>
<div id="wrapper">
  <!-- here is wrapper *everything* else -->
</div>
</body>

然后将包装器的宽度设置为值（主要是960px）。然后，当您将其边距设置为 0 auto 时，它会自行居中。

#wrapper{
  margin: 0 auto;
}

it is background-image set to body with property background-repeat:

background-repeat: repeat-x;

more: http://www.w3schools.com/css/pr_background-repeat.asp

Edit: As for centering your content—I do it this way:

<body>
<div id="wrapper">
  <!-- here is wrapper *everything* else -->
</div>
</body>

then set width of wrapper to value (mostly 960px). Then, when you set it's margin to 0 auto, it centers itself.

#wrapper{
  margin: 0 auto;
}

回复收藏 0 原文

梦巷 2024-08-29 05:54:07

添加背景图像有两个缺点：

更改标题的颜色时，您都必须打开 Photoshop 并更改颜色，然后在 CSS 中再次更改。
现在您希望页眉的背景颜色在整个页面上延伸，但如果您也想对页脚执行此操作怎么办？

最简单的解决方案是这个：（

您不仅创建了一种简单的方法来在整个页面上拉伸颜色，能够在所有页眉内容和页脚中使用不同的颜色，而且还可以避免 IE 的双边距问题（当您在同一元素中使用宽度和边距时）

index.html:

   <html> 
    <body id="body"> 
    <div id="header"> 
        <div class="container"> 
            <!-- header's content here -->
        </div><!-- .container --> 
    </div><!-- #header --> 
    <div id="content"> 
        <div class="container"> 
            <!-- main content here -->
    <div id="footer"> 
        <div class="container"> 
            <!-- footer's content here -->
        </div><!-- .container --> 
    </div><!-- #footer --> 
    </body> 
    </html>

style.css:

.container {
    margin: 0 auto;
    overflow: hidden;
    padding: 0 15px;
    width: 960px;
}

#header {
    background: #EEE;
}

#content {
    background-color: #F9F9F9;
}

#footer {
    background-color: #333;
    color: #BBB;
    clear: both;
}

在此示例中，div.container 居中。元素并赋予它们宽度，并且背景颜色可以在整个页面上延伸，因为 #header、#content 和 #footer 没有宽度。未来只需将边距和填充应用于 .container 内的 div，将来就可以避免 IE 出现的许多问题。

Adding background images has 2 drawbacks:

Every time you want to change the color of your header you have to open your Photoshop and change the color there and then change it again in your CSS.
Now you want the background color of the header to stretch across the page but what if you want to do that with the footer too?

The easiest solution is this one:

(you not only create a an easy way to stretch the color across the page, being able to use different color in all header content and footer, but also it saves yourself from the double margin problem of IE (when you use width and margin in the same elements).

index.html:

   <html> 
    <body id="body"> 
    <div id="header"> 
        <div class="container"> 
            <!-- header's content here -->
        </div><!-- .container --> 
    </div><!-- #header --> 
    <div id="content"> 
        <div class="container"> 
            <!-- main content here -->
    <div id="footer"> 
        <div class="container"> 
            <!-- footer's content here -->
        </div><!-- .container --> 
    </div><!-- #footer --> 
    </body> 
    </html>

style.css:

.container {
    margin: 0 auto;
    overflow: hidden;
    padding: 0 15px;
    width: 960px;
}

#header {
    background: #EEE;
}

#content {
    background-color: #F9F9F9;
}

#footer {
    background-color: #333;
    color: #BBB;
    clear: both;
}

In this example, the div.container centers the elements and also gives them a width, and the background color can stretch across the page because #header, #content and #footer don't have width. And in the future just apply margin and padding to divs inside .container, and you'll save lots of problems with IE in the future.

回复收藏 0 原文

是伱的 2024-08-29 05:54:07

我不敢苟同，有一个简单的方法可以做到这一点。兼容 Google Chrome 和 Firefox，IE 未测试。

在您的 CSS 文件中：

body{
    overflow-x:hidden;
}

div#headerbg{
    width:110%;
    margin-left:-20px;
    background-color:black;
}

现在只需在您的 HTML 文件中使用它即可。您可以添加定位和其他内容。

I beg to differ, there is an easy way to do this. Compatible with both Google Chrome and Firefox, IE not tested.

In your CSS file:

body{
    overflow-x:hidden;
}

div#headerbg{
    width:110%;
    margin-left:-20px;
    background-color:black;
}

and now simply use it in your HTML file. You can add positioning and what-not to this.

回复收藏 0 原文

做个少女永远怀春 2024-08-29 05:54:07

您可以使用宽度为 1px 的背景图像，并在水平方向上设置背景重复。

background-image:url('paper.gif');
background-repeat:repeat-x;

然后按照您喜欢的方式调整您的内容。

You can use a background image 1px width with set background repetition in horizontal.

background-image:url('paper.gif');
background-repeat:repeat-x;

And then align your content, which way you like.

回复收藏 0 原文

老旧海报 2024-08-29 05:54:07

这只是一个固定宽度的布局，但具有自动左右边距。这样做的效果是，如果页面大小比内容宽度宽，则将整个内容块居中。

背景只是设置为重复图像（repeat-x），使其看起来像菜单元素实际上延伸了页面的整个宽度。

回复收藏 0 原文

狼亦尘 2024-08-29 05:54:07

我认为你正在谈论 100%/80% 宽度差异......

这应该可以帮助你开始：

<div id="header" style="width:100%; margin: 0px;">
   <!-- header content -->
</div>
<div id="content" style="display: block; width: 80%; margin: 0px auto">
   <!-- content -->
</div>

内容上的 margin: auto 使块居中。

就像 Adam 所说，添加背景重复以赋予其图形上令人愉悦的元素。

I think you're talking about the 100%/80% width differential ....

This should help you get started:

<div id="header" style="width:100%; margin: 0px;">
   <!-- header content -->
</div>
<div id="content" style="display: block; width: 80%; margin: 0px auto">
   <!-- content -->
</div>

The margin: auto on the content makes the block centred.

Liike Adam says, add the background-repeat to give it the graphically pleasing element.

回复收藏 0 原文

不可一世的女人 2024-08-29 05:54:07

使用 CSS 2，您无法拉伸背景图像。没有用于设置背景图像尺寸的属性。您可以在 X、Y 或两个轴上重复它。

CSS 3 将允许这种拉伸。

回复收藏 0 原文

就是爱搞怪 2024-08-29 05:54:07

非常简单，没有一大堆喧嚣。

将其粘贴到 - body - 和 - div 容器之间 - 你也可以在其中添加任何你想要的东西，但在我的页面上它是这样的：（我试图让它换行，不行，只需复制并粘贴。）

<body>

<div id="bv_ImageMap1" style="margin:0;padding:0;position:absolute;left:0px;  top:187px;width:100%;height:5px;text-align:left;z-index:0;"> <img src="files/IMG_2.jpg"  id="ImageMap1" alt="" usemap="#ImageMapImageMap0" border="0" style="width:100%;   height:5px;">

<map name="ImageMapImageMap0">
</map>
</div>

<div container>

然后更改顶部所需的信息：px 高度：_px img src="yourfile/yourimg.jpg 重要的是不要忘记下一个高度：__px

没有其他任何内容任何地方都需要尝试一下。

Very simple without a whole bunch of hoopla.

Paste this in between - body - and - div container - you can have whatever else you want in there as well but on my page it's like this: (I tried to get it to wrap, no go, just copy and paste.)

<body>

<div id="bv_ImageMap1" style="margin:0;padding:0;position:absolute;left:0px;  top:187px;width:100%;height:5px;text-align:left;z-index:0;"> <img src="files/IMG_2.jpg"  id="ImageMap1" alt="" usemap="#ImageMapImageMap0" border="0" style="width:100%;   height:5px;">

<map name="ImageMapImageMap0">
</map>
</div>

<div container>

Then change the info you need for top:px height:_px img src="yourfile/yourimg.jpg and IMPORTANT don't forget the next height:__px

No anything else needed anywhere. Try it.

回复收藏 0 原文

~没有更多了~