【问题标题】:CSS - How to add a second background imageCSS - 如何添加第二张背景图片
【发布时间】:2013-05-19 18:02:00
【问题描述】:

请求:

我正在尝试使我的网站具有沿 x 轴重复的背景,但是当它在 y 轴上完成时,它会显示不同的图像。我希望它继续。

示例:

---------------
|             |
| (ORIGINAL)  | (repeats on x-axis)
|             |
---------------
|  (SECOND)   |
|             |
---------------
|  (SECOND)   |
|             |
---------------
|  (SECOND)   |
|             |
---------------
|  (SECOND)   |
|             |
---------------

(等等)

我将如何做到这一点?

【问题讨论】:

    标签: css image background web repeat


    【解决方案1】:

    使用多背景 CSS3 功能http://www.w3.org/TR/css3-background/#layering

    查看http://jsfiddle.net/pWw2A/ 的 jsfiddle 实时示例

     body {
      background: url(http://placehold.it/150x80/ff0000/ffffff) repeat-x,
       url(http://placehold.it/150x50/00ff00/000000) 0 80px repeat-y;                
      }
    

    【讨论】:

    • 非常感谢,这正是我所需要的!我为你打勾了,现在我可以重新使用我的网站了:D
    • 请注意,这仅适用于具有不透明背景的作品,因为第二个背景也会重新呈现到页面顶部。
    【解决方案2】:

    首先滚动背景可以通过 background-attachment:fixed;

    那么对于多个背景,你需要使用 CSS3 像这样:http://www.w3schools.com/css3/tryit.asp?filename=trycss3_background_multiple

    本教程可能会帮助您实现您想要的:

    http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

    它有一个很好的例子来说明如何做到这一点(与固定背景混合将或多或少是你想要的):

    http://silverbackapp.com/

    希望对您有所帮助!

    【讨论】:

    • 感谢您的帮助,但这并不是我想要的。 :(
    猜你喜欢
    • 1970-01-01
    • 2018-08-09
    • 2022-01-09
    • 1970-01-01
    • 1970-01-01
    • 2020-10-18
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多