我有一个推送菜单,通过在主内容容器上添加左边距来移动主内容容器.我希望能够有一个行为与https://music.amazon.co.uk/artists/B001DTRO4M/queen相同的背景图像.

到目前为止,这就是我在代码笔中要做的:

https://codepen.io/Maynards/pen/qBVLqLL

<div class="secondaryMenu">
  <div class="secondaryMenuItem">
    <div>Secondary Menu 1</div>
  </div>
  <div class="secondaryMenuItem active overlay">
    <div>Secondary Menu 2</div>
  </div>
  <div class="secondaryMenuItem active">
    <div>Secondary Menu 3</div>
  </div>
</div>
<div class="primaryMenu">
  <ul class="primaryMenuItems">
    <li class="primaryMenuItem">
      <div class="primaryMenuItemSelector">
        <div>1</div>
        <div class="primaryMenuItemExtra">Hidden Primary Menu Content</div>
      </div>
    </li>
    <li class="primaryMenuItem">
      <div class="primaryMenuItemSelector">
        <div>2</div>
        <div class="primaryMenuItemExtra">Hidden Primary Menu Content</div>
      </div>
    </li>
    <li class="primaryMenuItem">
      <div class="primaryMenuItemSelector">
        <div>3</div>
        <div class="primaryMenuItemExtra">Hidden Primary Menu Content</div>
      </div>
    </li>
  </ul>
</div>
<div class="mainContent">
  <div class"background">
    <div class="backgroundImage" style="background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/51/Test_grid_2000x2000.png");"></div>
    <div class="backgroundGradient"></div>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>
:root {
  --maxNav-width: 288px;
  --primaryNav-width: 56px; /* change to 288px to make full width */
  --secondaryNav-width: 232px;
  --secondaryNav-positionX: 0px; /* change to -232px to hide secondary menu */
}

body {
  padding: 0;
  margin: 0;
}
.mainContent {
  margin-left: min(var(--maxNav-width), calc(var(--primaryNav-width) + var(--secondaryNav-width) + var(--secondaryNav-positionX)));
  transition: margin-left 0.5s;
}
.content {
    width: 100%;
    padding: 64px 48px;
    max-width: 1440px;
}

.primaryMenu {
  height: 100%;
  width: var(--primaryNav-width);
  position: fixed;
  top: 0px;
  left 0px;
  background-color: #333333;
  overflow-x: hidden;
  white-space: nowrap;
  transition: width 0.5s;
}
.primaryMenuItems {
  color: #FFFFFF;
  padding: 0;
  margin: 0;
  list-style-type: none;
  margin-left: 16px;
  margin-top: 16px;
}
.primaryMenuItems > li {
  margin-bottom: 16px;
}
.primaryMenuItemSelector {
  display: flex;
}
.primaryMenuItemExtra {
  margin-left: 36px;
}

.secondaryMenu {
  width: var(--secondaryNav-width);
  height: 100%;
  position: fixed;
  top: 0;
  left: 56px;
  overflow-x: hidden;
  color: white;
  transition: 0.5s;
  transform: translateX(var(--secondaryNav-positionX)) translateZ(-1px);
}
.secondaryMenuItem {
  position: fixed;
  height: 100%;
  width: 100%;
  color: #FFFFFF;
  background-color: #777777;
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: none;
  box-sizing: border-box;
  z-index: 1;
}
.secondaryMenuItem.active {
    display: flex;
}
.secondaryMenuItem.overlay {
    z-index: 2;
}

.background {
    height: 100%;
    inset-inline-start: 0;
    min-height: 100vh;
    position: absolute;
    inset-inline-end: 0;
    top: 0;

    z-index: -2;
}
.backgroundImage {
    background-repeat: repeat-y;
    transition: background-image 1s ease-in;
    background-size: cover;
    transform: translateZ(0);
    background-attachment: fixed;
    position: fixed !important;
    background-position: center top;
    width: 100%;
    height: 100%;
    top: 0;
    inset-inline-start: 0;
    z-index: -1;

    transition: margin-left .5s;
    margin-left: min(var(--maxNav-width), calc(var(--primaryNav-width) + var(--secondaryNav-width) + var(--secondaryNav-positionX)));
}
.backgroundGradient {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), #000000 100vh, #1f2222);
    height: 100%;
    max-height: 200vh;
    position: sticky;
    top: -100vh;
    width: 100%;
    z-index: -1;
}

我已经到了一个点,图像显示的梯度,但它没有调整大小时,主要内容容器收缩.目前,代码笔根本没有显示图像,我也不确定我是如何倒退的!

EDIT 1: more context & sample images

理想的效果是将背景图像约束到菜单右侧的容器中(其中<p>个文本为).在我看来,左边的背景图像被剪掉了.

Menu Expanded Menu Expanded

Menu Collapsed Menu Collapsed

顺便说一句,我也无法在背景图像的顶部和内容的下方获得渐变.

EDIT: Final solution

使用公认答案的解决方案,我得到了this

推荐答案

如果我理解正确,对于您想要的布局,有几点建议:

  1. 左侧的导航具有流畅的宽度,当导航调整内容的大小时,右侧的内容也应调整大小,包括任何背景图像;
  2. 右侧的内容由背景图像组成,背景图像应始终限制在内容容器的宽度范围内;
  3. 内容部分的背景图像应该是固定的,渐变叠加应该在背景图像上滚动.

下面是一个如何实现符合上述所有要求的布局的示例.要查看它的工作情况,请调整--menu-width变量.我想这应该是你的开始.

:root {
  --menu-width: 240px;
}

.nav {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  width: var(--menu-width);
  background-color: #ff0099;
}

.main {
  position: relative;
  margin-left: var(--menu-width);
  min-height: 100vh;
}

.main-background {
  content: ''; 
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--menu-width);
  background-image: url(https://images.unsplash.com/photo-1477233534935-f5e6fe7c1159?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80);
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.main::before,
.main::after {
  position: absolute;
  z-index: 1;
  right: 0;
  left: 0;
  content: '';
  background-image: linear-gradient(180deg, rgba(2,0,36,0) 0%, rgba(0,0,0,1) 100%);
}

.main::before {
  top: 0;
  height: 100vh;
  background-image: linear-gradient(180deg, rgba(2,0,36,0) 0%, rgba(0,0,0,1) 100%);
}

.main::after {
  content: '';
  top: 100vh;
  bottom: 0;
  background-color: #000000;
}

.container {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  padding: 1rem 2rem;
  padding-top: 24rem;
  max-width: 960px;
  color: white;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet"/>
<div>
  <nav class="nav"></nav>
  <main class="main">
    <div class="main-background"></div>
    <div class="container">
      <h1>This is a title</h1>
      <p>Two ghostly white figures in coveralls and helmets are softly dancing worldlets hearts of the stars radio telescope of brilliant syntheses a billion trillion. Network of wormholes a very small stage in a vast cosmic arena with pretty stories for which there's little good evidence at the edge of forever hundreds of thousands preserve and cherish that pale blue dot. Courage of our questions with pretty stories for which there's little good evidence as a patch of light not a sunrise but a galaxyrise how far away are creatures of the cosmos.</p>
      <p>A billion trillion courage of our questions brain is the seed of intelligence billions upon billions prime number the carbon in our apple pies. Birth network of wormholes finite but unbounded radio telescope vanquish the impossible vastness is bearable only through love? Take root and flourish vanquish the impossible a still more glorious dawn awaits Orion's sword Sea of Tranquility extraordinary claims require extraordinary evidence? Tendrils of gossamer clouds the only home we've ever known Orion's sword Orion's sword invent the universe another world.</p>
      <p>Paroxysm of global death Drake Equation across the centuries Sea of Tranquility vanquish the impossible finite but unbounded? Culture hundreds of thousands from which we spring the ash of stellar alchemy muse about network of wormholes. Concept of the number one hundreds of thousands corpus callosum two ghostly white figures in coveralls and helmets are softly dancing a mote of dust suspended in a sunbeam are creatures of the cosmos.</p>
      <p>Sea of Tranquility billions upon billions emerged into consciousness explorations inconspicuous motes of rock and gas stirred by starlight. Network of wormholes the sky calls to us a mote of dust suspended in a sunbeam the carbon in our apple pies take root and flourish kindling the energy hidden in matter. Shores of the cosmic ocean from which we spring extraordinary claims require extraordinary evidence dispassionate extraterrestrial observer a very small stage in a vast cosmic arena not a sunrise but a galaxyrise.</p>
      <p>Quasar ship of the imagination decipherment a very small stage in a vast cosmic arena Apollonius of Perga descended from astronomers. Not a sunrise but a galaxyrise astonishment Sea of Tranquility cosmic ocean invent the universe the carbon in our apple pies. Globular star cluster courage of our questions rich in heavy atoms dispassionate extraterrestrial observer invent the universe how far away. Intelligent beings dream of the mind's eye dream of the mind's eye extraordinary claims require extraordinary evidence star stuff harvesting star light great turbulent clouds.</p>
      <p>Two ghostly white figures in coveralls and helmets are softly dancing birth star stuff harvesting star light extraplanetary of brilliant syntheses permanence of the stars. Across the centuries great turbulent clouds decipherment Tunguska event citizens of distant epochs the sky calls to us? Invent the universe paroxysm of global death citizens of distant epochs hearts of the stars across the centuries hearts of the stars. Inconspicuous motes of rock and gas not a sunrise but a galaxyrise invent the universe the sky calls to us at the edge of forever paroxysm of global death.</p>
      <p>Extraordinary claims require extraordinary evidence as a patch of light galaxies Rig Veda Cambrian explosion the carbon in our apple pies. Stirred by starlight hydrogen atoms hydrogen atoms gathered by gravity dispassionate extraterrestrial observer the only home we've ever known. Two ghostly white figures in coveralls and helmets are softly dancing descended from astronomers made in the interiors of collapsing stars Tunguska event the only home we've ever known brain is the seed of intelligence.</p>
      <p>Quasar explorations decipherment star stuff harvesting star light the ash of stellar alchemy from which we spring? A mote of dust suspended in a sunbeam the only home we've ever known courage of our questions dispassionate extraterrestrial observer take root and flourish realm of the galaxies? Citizens of distant epochs a very small stage in a vast cosmic arena Sea of Tranquility the only home we've ever known white dwarf vastness is bearable only through love.</p>
      <p>Rogue dream of the mind's eye cosmic ocean two ghostly white figures in coveralls and helmets are softly dancing hundreds of thousands Orion's sword? Paroxysm of global death bits of moving fluff descended from astronomers the ash of stellar alchemy Vangelis as a patch of light? At the edge of forever made in the interiors of collapsing stars the sky calls to us paroxysm of global death at the edge of forever the only home we've ever known?</p>
      <p>Hydrogen atoms invent the universe Drake Equation two ghostly white figures in coveralls and helmets are softly dancing Rig Veda a billion trillion. Stirred by starlight courage of our questions extraordinary claims require extraordinary evidence the ash of stellar alchemy kindling the energy hidden in matter courage of our questions. Rich in heavy atoms bits of moving fluff a mote of dust suspended in a sunbeam courage of our questions emerged into consciousness decipherment.</p>
      <p>Globular star cluster Tunguska event the ash of stellar alchemy the only home we've ever known rich in mystery great turbulent clouds? Not a sunrise but a galaxyrise at the edge of forever white dwarf intelligent beings courage of our questions muse about. Bits of moving fluff with pretty stories for which there's little good evidence stirred by starlight a still more glorious dawn awaits take root and flourish star stuff harvesting star light.</p>
      <p>Hearts of the stars rings of Uranus tendrils of gossamer clouds network of wormholes another world as a patch of light? Muse about globular star cluster a still more glorious dawn awaits Rig Veda cosmic ocean shores of the cosmic ocean. Rig Veda descended from astronomers concept of the number one Sea of Tranquility emerged into consciousness Rig Veda. A mote of dust suspended in a sunbeam gathered by gravity two ghostly white figures in coveralls and helmets are softly dancing the carbon in our apple pies extraordinary claims require extraordinary evidence invent the universe?</p>
      <p>Tunguska event made in the interiors of collapsing stars quasar Flatland not a sunrise but a galaxyrise hearts of the stars. Great turbulent clouds the sky calls to us tingling of the spine a mote of dust suspended in a sunbeam extraordinary claims require extraordinary evidence extraordinary claims require extraordinary evidence. Vastness is bearable only through love two ghostly white figures in coveralls and helmets are softly dancing permanence of the stars courage of our questions dream of the mind's eye a very small stage in a vast cosmic arena.</p>
      <p>Encyclopaedia galactica decipherment the sky calls to us billions upon billions the only home we've ever known hundreds of thousands. Euclid made in the interiors of collapsing stars bits of moving fluff from which we spring realm of the galaxies with pretty stories for which there's little good evidence. Dispassionate extraterrestrial observer network of wormholes take root and flourish dispassionate extraterrestrial observer with pretty stories for which there's little good evidence not a sunrise but a galaxyrise?</p>
      <p>Rig Veda of brilliant syntheses hearts of the stars the only home we've ever known Sea of Tranquility extraplanetary. Take root and flourish Drake Equation cosmic ocean invent the universe rings of Uranus network of wormholes. Not a sunrise but a galaxyrise Drake Equation laws of physics not a sunrise but a galaxyrise two ghostly white figures in coveralls and helmets are softly dancing a mote of dust suspended in a sunbeam.</p>
      <p>Decipherment Hypatia astonishment great turbulent clouds at the edge of forever Rig Veda. Muse about as a patch of light vanquish the impossible hundreds of thousands across the centuries ship of the imagination. Not a sunrise but a galaxyrise take root and flourish gathered by gravity shores of the cosmic ocean courage of our questions vastness is bearable only through love? Invent the universe the only home we've ever known courage of our questions kindling the energy hidden in matter the carbon in our apple pies invent the universe.</p>
      <p>Hypatia vanquish the impossible star stuff harvesting star light permanence of the stars rings of Uranus Sea of Tranquility. Rich in heavy atoms emerged into consciousness are creatures of the cosmos muse about the ash of stellar alchemy a very small stage in a vast cosmic arena. With pretty stories for which there's little good evidence encyclopaedia galactica inconspicuous motes of rock and gas two ghostly white figures in coveralls and helmets are softly dancing dream of the mind's eye citizens of distant epochs.</p>
      <p>Consciousness Sea of Tranquility citizens of distant epochs Vangelis science shores of the cosmic ocean. Venture another world extraordinary claims require extraordinary evidence are creatures of the cosmos concept of the number one the only home we've ever known. A very small stage in a vast cosmic arena the sky calls to us gathered by gravity hearts of the stars hundreds of thousands rich in heavy atoms? A mote of dust suspended in a sunbeam rich in heavy atoms not a sunrise but a galaxyrise two ghostly white figures in coveralls and helmets are softly dancing the only home we've ever known courage of our questions.</p>
      <p>Worldlets a mote of dust suspended in a sunbeam hundreds of thousands intelligent beings Cambrian explosion trillion? Brain is the seed of intelligence courage of our questions citizens of distant epochs emerged into consciousness the ash of stellar alchemy corpus callosum. Rich in heavy atoms from which we spring a still more glorious dawn awaits extraordinary claims require extraordinary evidence across the centuries the carbon in our apple pies?</p>
      <p>Tesseract billions upon billions vanquish the impossible dispassionate extraterrestrial observer a mote of dust suspended in a sunbeam dream of the mind's eye. Descended from astronomers ship of the imagination inconspicuous motes of rock and gas made in the interiors of collapsing stars the carbon in our apple pies the ash of stellar alchemy. From which we spring muse about star stuff harvesting star light stirred by starlight permanence of the stars rings of Uranus and billions upon billions upon billions upon billions upon billions upon billions upon billions.</p>
      <p>
    </div>
  </main>
</div>

背景图像可以作为伪元素应用于<body>,这将防止对空<div>的需要,但我认为使用空<div>更有意义,因为它保留在代码流中,并且保持了更多的上下文.

这是一个代码笔,你可以随意使用代码:https://codepen.io/neutraltone/pen/XWzvYbP

Html相关问答推荐

有没有一种方法可以用css和html在桌面上并排显示列,在移动设备上显示一个下方的列?

有没有可能设置div的边框宽度相对于其父宽度和高度?'

Chrome和Safari浏览器中的CSS3动画不同

将网格包装在css中

如何在垂直堆叠的表格中调整人造列的大小?

如何将内容元素放在侧边栏旁边?

如何制作带有粘性头和脚的可滚动车身

从html文件中提取元素的Python BeautifulSoup

可以';t使我的导航栏在HTML/CSS中正确对齐

HTML 重定向到当前服务器

使用 popover api 和 `

如何使用CSS Select 同级元素的::before伪元素?

如何避免链接在悬停 timeshift 动,同时增加导航栏中的字体大小?

将图像的高度限制为固定的纵横比,并在超过时使用 object-fit

如何动态调整彼此重叠的两个 div 的大小,使它们在增长时保持相同的高度

th 内的 div 标签没有占据全高

在随机图像下对齐文本

使用 Selenium for Python 在网站上查找类名称中包含换行符的元素

如何使用纯 CSS Select 具有特殊子 node 的父 node ?

Bootstrap - 如何通过 3 级层次 struct 访问 1000 个项目中的一个项目?