【问题标题】:Centered DIV with defferent backgrounds on either side两侧具有不同背景的居中 DIV
【发布时间】:2009-10-09 02:54:53
【问题描述】:

所以我正在创建一个网站,它的所有内容都在一个居中的 div 中。

我使用 margin-left 和 right 设置为 auto 来使我的内容居中,在我的内容的左侧我想要一个纯白色背景,但是在右侧,我想重复一个图案背景。

也许我的大脑工作不正常,但我今天想不出解决办法..

-------------------------------------------
|  white    |   content       |  pattern  |         
|    bg     |   centered      |    bg     |
|           |                 |           |
|           |                 |           |
-------------------------------------------

【问题讨论】:

  • 可能不需要问题标题中的 [CSS]

标签: css html background center-align


【解决方案1】:

您可以使用可能的3-column layout options 之一。然后,只需将第三列的背景图像设置为您想要的任何内容,重复。

【讨论】:

    【解决方案2】:

    使用 1680 像素宽的图像,一半是白色,一半是你的图案,并使用 repeat-y 垂直和居中重复它...这将有助于你将来说你想将你的背景更改为一个单一的图案除了 bg img 文件之外,无需更改任何其他内容...

    body{
        background:url(../images/bg.jpg) fixed;
        background-repeat:repeat-y;
        background-position:top center;
    }
    

    您还可以使用margin:0 auto;将内容区域居中
    *您可以在photoshop中轻松创建半白半图案的背景图片

    【讨论】:

    • 完美!它可能不是最干净的解决方案,但它使我不必完全重写我的页面结构。我的 3000px 宽 bg/pattern 仍在 2kb 以下,所以文件大小不是问题。
    • 我在我的网站上使用了类似的东西来添加阴影。相信我这是很好用的解决方案游戏点,游戏预告片使用类似的技术为其内容添加阴影
    【解决方案3】:

    您可以使用 3 列布局技术并将右列和左列设置为不同的背景。一种这样的描述here

    根据背景图片,您还可以执行以下操作: 背景: url(...) #000 重复-y 对;

    如果背景图片足够宽,可以从屏幕右侧延伸到您的中心内容下方,并且需要垂直重复,这将起作用。但是,这会根据不同的屏幕分辨率而改变。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2014-06-30
      • 2012-02-11
      • 1970-01-01
      • 2023-03-23
      • 1970-01-01
      • 2017-02-21
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多