是否可以定位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而不是視口固定？

回答

相關問題