是否有可能定位背景附件:固定相对于div不是视窗

是否有可能使background-attachment:fixed;为div定位的div位置不与视窗?如果没有，也许还有其他选择?

CSS

.zest-ghost {
        width: 302px;
        height: 222px;
        top: 0;
        left: 50%;
        background-image: url(../images/logo-ghost.png);
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

<div class="zest-ghost"></div>

此代码使图像fixed相对于视口而不是div。我需要相同的效果，但有可能移动图像左或正确的。图片应该有它原来的宽度和高度

您想要将页面(主体)下移，并保留div的背景。简而言之，这就是视差设计的基础?当然，它的移动速度不会比滚动速度慢，但这可以用javascript完成。为了使页面在没有javascript的情况下尽可能可用，这个CSS应该是起点。

那么我想你想要这样的东西:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>TITLE</title> <style> html,body { height:100%; } body { background-position:0px 0px; background-attachment: fixed; } .test { height:4em; background:url('150x150.jpg'); background-attachment: fixed; background-position:5px 0px; background-size: cover; } div.space { height:70%; } </style> </head> <body> <div class="space">a</div> <div class="test"> </div> <div class="space"></div> </body> </html>
查看实际效果:https://jsfiddle.net/hhdf6639/5

我们可以使用background-position属性。您可以使用像素来实际移动div内的图像，而不是使用center。

.zest-ghost { width: 302px; height: 222px; top: 0; left: 50%; background-image: url(../images/logo-ghost.png); background-attachment: fixed; background-position: 50% 20px; background-repeat: no-repeat; background-size: cover; }
以上将调整x轴裁剪内容为50%，并将图像垂直向下移动20px。

希望对你有所帮助

.zest-ghost{ background-image: url('../images/zest-logo-ghost.png'); background-repeat: no-repeat; background-attachment: fixed; height:100%; width:100%; }
检查:http://jsfiddle.net/jdmitz/V8WqE/

相关内容

最新更新

热门标签：