3

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

屏幕越来越小

对于宽屏幕，图像会粘在左右两侧，但随着屏幕缩小，它们会滑出视野。如果那里有任何天才可以想出一个纯 css 解决方案，这里是一个模型：

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

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

如果可能的话，CSS 将是首选，否则我可以在 javascript 中做一些基本的事情。

干杯! 戴夫

4

2 回答 2

2

如果您不介意使用一些未广泛实施的技术，您可以尝试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;
    }
}

兼容表

（我之所以选择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;
    }
}

但事实证明，四个值background-position没有实现比calc().

于 2013-04-11T03:27:44.833 回答
0

这是另一个解决方案，其最高级的 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%;   
    }
}

这是通过 jsfiddle 的工作示例。

更新：这是另一个版本，它抛弃了#bg1and和伪元素。#bg2body:beforebody:after

于 2013-04-11T04:06:31.760 回答