Question

请查看this。如果背景定位（左包装right top，右包装left top）有效，则除了内容盒外，加油泵还能整齐地安装。但他们没有，我似乎无法找出原因......

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组成; dr 我真正需要的是将bg图像的固定点直接放在内容旁边的顶部 - 使背景从锥形区域伸出。

Answer 1

为了让内容以更恰当的方式显示，我切换了图像和定位。我还添加了一个background-size：contains;两个元素。至于响应性，我会设置一个媒体查询，以允许这些图像在该菜单同时消失。我还注意到在菜单消失之前菜单项已经包装了很多。如果您还没有注意到，请站起来。

#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;
}

Answer 2

我看了一眼，并通过重新编写html来解决它（仍使用你的w3.css但为背景添加了类）。我删除了background-attachment:fixed;并在背景中添加了no-repeat和background-size。

希望这有帮助

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

css背景定位不起作用

2 个答案: