如何显示固定宽度的居中背景

发布于 2025-01-02 09:20:06 字数 485 浏览 1 评论 0原文

我的网页带有无聊的白色背景及其所有内容（网站徽标和几个谷歌图表）的宽度是固定的700px并且居中：

    h1,h2,h3,p,div,form { 
    text-align: center; 
}

我想在下面添加一个垂直平铺的png图像（只是一个1px高度的条纹），会显示一个白色的固定宽度 800px ，其余的应该是其他颜色（如下面示例中的红色）或渐变，并且应该增长页面宽度：

在此处输入图像描述

如何使用 CSS 做到最好（即最可靠且适用于大多数浏览器）或者HTML？

原文

I have web pages with a boring white background and all their contents (the website logo and several google charts) are of the fixed width 700px and centered:

    h1,h2,h3,p,div,form { 
    text-align: center; 
}

I'd like to add a vertically-tiled png image underneath (just a stripe of 1px height), which would display a fixed width 800px of white and the rest should be some other color (like red in the example below) or gradient and should grow
with the page width:

enter image description here

How do you do it best (i.e. most reliable and for most browsers) with CSS or HTML?

分享到QQ

分享到微博

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

发布评论

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

歌入人心 2025-01-09 09:20:06

您需要将内容放入 800 像素的容器中，才能实现红色或渐变背景和条纹 PNG 效果。因此，您的所有内容都将进入 .container div 中，您的样式将是：

body{
   background:#ff0000;
}

.container{
    width:800px;
    margin:0 auto;
    position:relative;
    background:url('/path/to/image/image.png') repeat 0 0;
}

因此，当前出现在 body 标记中的所有内容都必须放置在.container div 标签如下：

<body>
    <div class='container'>
        <p></p>
        <h3></h3>
        .....
    </div>
</body>

理想情况下，如果您的目标屏幕分辨率最低为 800 x 600，则 .container 宽度应小于 800，以避免水平滚动条。

您可能还会发现下面的链接对于尝试创建跨浏览器渐变和 PNG 很有用：

Stripe Generator - http://www.stripegenerator.com/
CSS 渐变创建器 - http://www.colorzilla.com/gradient-editor/

上面的渐变创建器使用 CSS 创建渐变，并且还支持 IE。然而，在 IE 中，由于渐变是使用 IE 过滤器创建的，因此它往往会剪切隐藏在其中的任何内容，而不是让它溢出。您也可以随时使用图像来创建渐变。

您可能还想考虑使用 CSS PIE，以实现 IE 兼容性 - http://css3pie.com/

希望这会有所帮助。

You'll need to put your content into a container of 800px in order to achieve both, the red or gradient background and the striped PNG effect. So all your content would then go into a .container div and your styles would be:

body{
   background:#ff0000;
}

.container{
    width:800px;
    margin:0 auto;
    position:relative;
    background:url('/path/to/image/image.png') repeat 0 0;
}

So all your content which currently appears in the body tag, will have to be placed in the .container div tag like so:

<body>
    <div class='container'>
        <p></p>
        <h3></h3>
        .....
    </div>
</body>

Ideally, if you're targeting a minimum screen resolution of 800 x 600, your .container width should be lesser than 800 to avoid the horizontal scrollbar.

You might also find the links below useful in trying to create both, cross-browser gradients and the PNG:

Stripe Generator - http://www.stripegenerator.com/
CSS gradient creator - http://www.colorzilla.com/gradient-editor/

The gradient creator above creates gradients using CSS and also has support for IE. In IE however, since the gradients are created using IE filters, it tends to cut any content hidden inside it, instead of allowing it to overflow. You can always also just use an image to create the gradient.

You might also want to consider using CSS PIE, for IE compatibility - http://css3pie.com/

Hope this helps.

回复收藏 0 原文

浅忆流年 2025-01-09 09:20:06

如果你想添加1px高度的图片作为背景，找到下面的代码

/*CSS*/
 body
 {background:#ff0000;}

 .main
 {
  text-align:center; 
  width:800px; 
  background-image:url('https://i.sstatic.net/LNBYu.png');
  background-repeat:y-repeat;
  background-position:center;
  min-height:300px;
 }

/*HTML*/
<body>
<div align="center">
  <div class="main">
     Your Content Goes Here       
  </div>
</div>
</body>

你可以看到结果如下......（这里我垂直重复了1px高度的图片，所以你可以看到你的背景充满了图像）

在此处输入图像描述

或单击此处查看结果

希望这对您有帮助！除此之外还有什么问题，欢迎评论！

If you want to add a 1px height image as the backgound, find the below code

/*CSS*/
 body
 {background:#ff0000;}

 .main
 {
  text-align:center; 
  width:800px; 
  background-image:url('https://i.sstatic.net/LNBYu.png');
  background-repeat:y-repeat;
  background-position:center;
  min-height:300px;
 }

/*HTML*/
<body>
<div align="center">
  <div class="main">
     Your Content Goes Here       
  </div>
</div>
</body>

You can see the result as follows.... (Here I'm repeating the 1px height image vertically, so you can see your background is filled with the image)

enter image description here

or Click here to See the Result

Hope this help you !! Any other questions on top of this, pls do comment !

回复收藏 0 原文

~没有更多了~