是否可以定位background-attachment：相对于div而不是视口固定？

是否有可能为div制作background-attachment:fixed;定位div的位置不带有视口？如果没有，也许还有其他的选择？是否可以定位background-attachment：相对于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; 
    }

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

该代码使得图像fixed相对视口，而不是与div。 I 需要相同的效果，但可以将图像左移或右移。图像应该有它的原始宽度和高度

来源

2016-07-05 Giedidius

向我们展示你有试过吗？ –

Theres没有mutch显示..我可以问为什么我得到消极？ .. :) – Giedidius

我相信你被拒绝投票了，因为下来的选民并没有意识到你正在谈论'background-attachment'属性，因为你只是要求某些东西是'固定'的。我认为，你不想让div内的背景移动，这并不是那么微不足道。 – entwicklerseite

希望这有助于你

 .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/

来源

2016-07-05 11:09:54

视口不适用于div。我需要相同的效果，左右移动图像的可能性。 – Giedidius

你要移动的页面（机构）来，有的背景div留在原地。所以简而言之，这将是parallax design的基础知识？因为它不会比滚动速度慢，但可以用JavaScript来完成。这个CSS应该是起点，以便使页面尽可能在没有JavaScript的情况下可用。

那么我想你想是这样的：

<!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

来源

2016-07-05 11:25:22 entwicklerseite

Thant不是我所需要的。基本上我需要的是将背景图像移动到左侧，但它应该具有'background-attachment：fixed'效果并适合div大小。 – Giedidius

然后添加'background-size：cover'到它，因为我已经在jsfiddle链接中完成了。 “左”是什么意思？你有一个左滚动页面？ – entwicklerseite

你至少可以投票给我，如果这更接近你想要做的，而我还没有完全理解：/ – entwicklerseite

是否可以定位background-attachment：相对于div而不是视口固定？

回答

相关问题