gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 05:11:51 24 4
gpt4 key购买 nike

我有web pages具有无聊的白色背景,其所有内容(网站 Logo 和几个谷歌图表)都是固定宽度 700px 并居中:

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

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

enter image description here

如何使用 CSS 或 HTML 做到最好(即最可靠且对大多数浏览器而言)?

最佳答案

您需要将您的内容放入一个 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 很有用:

  1. 条纹生成器 - http://www.stripegenerator.com/

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

上面的渐变创建器使用 CSS 创建渐变,并且还支持 IE。然而在 IE 中,由于渐变是使用 IE 过滤器创建的,它倾向于剪切隐藏在其中的任何内容,而不是让它溢出。您也可以始终只使用图像来创建渐变。

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

希望这对您有所帮助。

关于html - 如何显示固定宽度的居中背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9139762/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com