Question

这是我试图在窗口缩小时尝试实现的模型，使用左右两个单独的图像：

screen getting smaller

对于宽屏幕，图像将向左和向右粘贴，但随着屏幕缩小，它们将滑出视野。这是一个模型，如果有任何天才可以找出一个纯粹的CSS解决方案：

http://jsfiddle.net/TV8sB/1/

<div id="bg1"><div id="bg2"></div></div>

如果可能的话，CSS会更受欢迎，否则我可以在javascript中做一些基本的事情。

干杯！戴夫

Answer 1

如果您不介意使用一些未广泛实施的技术，可以尝试calc()：

http://jsfiddle.net/TV8sB/2/

@media only screen and (max-width: 700px) {
    #bg1{
        background-position:-webkit-calc(50% - 285px) top;
        background-position:-moz-calc(50% - 285px) top;
        background-position:-ms-calc(50% - 285px) top;
        background-position:calc(50% - 285px) top;
    }
    #bg2{
        background-position:-webkit-calc(50% + 285px) top;
        background-position:-moz-calc(50% + 285px) top;
        background-position:-ms-calc(50% + 285px) top;
        background-position:calc(50% + 285px) top;
    }
}

Compatible table

（我选择了285px，因为这最适合我的Chrome。你当然可以选择其他你觉得效果更好的像素。）

如果您对此感到不舒服，可能需要将#bg1和#bg2与#content分开（即将它们作为独立元素而不是内容包装器）。

编辑：

这是另一种不使用calc()的解决方案：

http://jsfiddle.net/TV8sB/3/

<div id="bg1"></div><div id="bg2"></div>

<div id="content">
<!-- ... -->
</div>

#bg1{
    position:absolute;
    width:50%;
    top:0px;
    left:0px;
    bottom:0px;
    background: url("http://sunny-kids-wordpress-theme.dtbaker.net/wp-content/themes/sunny-kids/images/background_leaves_left.png") no-repeat left top;
}
#bg2{
    position:absolute;
    width:50%;
    top:0px;
    right:0px;
    bottom:0px;
    background: url("http://sunny-kids-wordpress-theme.dtbaker.net/wp-content/themes/sunny-kids/images/background_leaves_right.png") no-repeat right top;    
}
@media only screen and (max-width: 700px) {
    #bg1{
        background-position:right 220px top 0px;
    }
    #bg2{
        background-position:220px 0px;
    }
}

但事实证明four value background-position is not implemented wider than calc()。

Answer 2

这是另一个解决方案，其最先进的CSS要求是媒体查询，您似乎已经愿意接受：

<强> HTML

<body>
    <div class="bg" id="bg1"></div>
    <div class="bg" id="bg2"></div>
    <div id="content">
        ...         
    </div>
</body>

<强> CSS

html {
    position: relative;
}
html, body{
    background:#f8e9a4;
    margin: 0;
}
.bg {
    position: absolute;
    top: 0;
    bottom: 0;
}
#bg1{
    background: url("http://sunny-kids-wordpress-theme.dtbaker.net/wp-content/themes/sunny-kids/images/background_leaves_left.png") no-repeat left top;
    width: 113px;
    left: 0;
}
#bg2{
    background: url("http://sunny-kids-wordpress-theme.dtbaker.net/wp-content/themes/sunny-kids/images/background_leaves_right.png") no-repeat right top;   
    width: 122px;
    right: 0;
}
#content{
    width:400px;
    background:#FFF;
    margin: 20px auto;
    min-height:500px;
    padding:20px;
    border-radius:10px;
    position: relative;
}

@media only screen and (max-width: 700px) {
    #bg1{
       right: 50%;
        margin-right: 220px;
        width: auto;
        background-position: right top;
    }
    #bg2{
         left: 50%;
        margin-left: 220px;
        width: auto;
        background-position: left top;
    }
}

@media only screen and (max-width: 440px) {
    #content{
        width:90%;
        }
    img{
     max-width:100%;   
    }
}

这是 Working Example via jsfiddle 。

更新：这是{strong> another version ，#bg1和#bg2的{{1}}和body:before }伪元素。

CSS，左边和;右侧背景图像滑出小视图的视图

2 个答案: