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背景定位不起作用

回答

相关问题