css背景定位不起作用

請看看this。如果背景定位（左包裝right top，右包裝left top）工作，除了內容框外，氣泵將整齊地貼合。但他們沒有和我似乎無法找出爲什麼......css背景定位不起作用

HTML

<body> 
    <!-- navigation stuff --> 
    <div class="w3-row"> 
     <div id="fill-left" class="w3-col s1 m2 l3">&nbsp;</div> 
     <div id="main" class="w3-col s10 m8 l6"> 
      <div id="content" class="w3-container w3-white"> 
       <p>Lorem ipsum 
      </div> 
     </div> 
     <div id="fill-right" class="w3-col s1 m2 l3">&nbsp;</div> 
    </div> 
</body>

CSS

#fill-left { 
    z-index: -1; 
    background-image: url(bgleft.jpg); 
    background-attachment: fixed; 
    background-position: right top; 
} 

#fill-right { 
    z-index: -1; 
    background-image: url(bgright.jpg); 
    background-attachment: fixed; 
    background-position: left top; 
} 

div#main { 
    z-index: 1; 
    box-shadow: 0px 0px 100px #000; 
}

注：W3-XXX類從名爲W3一個CSS庫幹.CSS;我用於簡單的響應式網站佈局。不要恨我......

TJ;博士 我恰恰需要的是把BG-圖像的固定點上方緊挨着的內容 - 將背景從conent伸出區。

來源

2017-05-15 traxx2012

改變背景的位置用數字代替。例如：'background-position：-100px 720px;'和數字一起玩直到你找到你想要的結果 –

這不會有反應，或者我誤會了嗎？ – traxx2012

@OmriLuzon我的意思是「有點敏感」的定位。除了內容之外，我還需要氣體（咒罵，這些東西叫做什麼？！）。在較小的屏幕上，根本沒有背景圖像，而在較大的屏幕上，除了氣體外部角落外，它還會顯示更多圖像。我只需要這種定位就能以動態的方式工作。 – traxx2012

我看了一下，並通過重新調整html來解決它（仍然使用了w3.css，但爲背景添加了類）。我刪除了background-attachment:fixed;，並在背景中添加了no-repeat和background-size。

希望這有助於

#fill-left, 
 
#content, 
 
#fill-right { 
 
    display: inline-block; 
 
    width: 33%; 
 
    height: 100px; 
 
    padding: 0!important; 
 
    position: relative; 
 
} 
 

 
.bg1 { 
 
    vertical-align: top; 
 
    z-index: -3; 
 
    background-image: url("http://www.rachelgallen.com/images/purpleflowers.jpg"); 
 
    background-position: left top; 
 
    background-repeat: no-repeat; 
 
    //float:left; 
 
} 
 

 
.bg2 { 
 
    vertical-align: top; 
 
    z-index: -3; 
 
    background-image: url("http://www.rachelgallen.com/images/yellowflowers.jpg"); 
 
    background-size: cover; 
 
    background-position: right top; 
 
    background-repeat: no-repeat; 
 
    float: right!important; 
 
} 
 

 
#main { 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 1; 
 
    box-shadow: 0px 0px 100px #000; 
 
} 
 

 
#content { 
 
    background-color: transparent!important; 
 
    background-position: center top; 
 
    z-index: 0; 
 
} 
 
p{ 
 
    text-align: center; 
 
    color: #8B0000; 
 
}

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" /> 
 
<div id="main" class="w3-row"> 
 
    <div id="fill-left" class="bg1 w3-col s1 m2 l3">&nbsp;</div> 
 
    <div id="content" class="w3-container w3-white"> 
 
    <p>Lorem ipsum</p> 
 
    </div> 
 
    <div id="fill-right" class="bg2 w3-col s1 m2 l3">&nbsp;</div> 
 
</div>

來源

2017-05-15 23:03:02

寬度應該根據您的需要進行調整，但您得到的要點是..在這裏撥動https://jsfiddle.net/RachGal/zLptpt/ –

爲了讓內容以更適當的方式顯示出來，我調整了圖像和定位。我還添加了一個背景大小：包含;對這兩個元素。至於響應能力，我會設置一個媒體查詢來允許這些圖像在該菜單執行時消失。我還注意到，在菜單消失之前菜單項目已經很多了。如果你還沒有注意到的話，請立即出發。

#fill-left { 
    z-index: -1; 
    background-image: url(bgright.jpg); 
    background-size: contain; 
    background-attachment: fixed; 
    background-position: left; 
} 

#fill-right { 
    z-index: -1; 
    background-image: url(bgleft.jpg); 
    background-size: contain; 
    background-attachment: fixed; 
    background-position: right; 
}

來源

2017-05-15 19:48:11 trav

我注意到了，但是謝謝。交換圖像並不能真正解決問題，因爲背景圖像是工作室牆上的噴槍藝術品 - 所以它不會被識別出來... – traxx2012

css背景定位不起作用

回答

相關問題