1

我正在尝试在应该显示在引导容器后面的 div 中显示图像。

引导容器应该有页面的主要内容（比如一篇文章），我要显示的图像应该显示在容器后面，作为文章的插图。

我尝试在 CSS 中更改 z-index 但它没有做任何事情。这是我尝试的 JSfiddle。容器有黄色背景，应该完全显示在后面的默认图像之上。但事实并非如此。

<div style="z-index:-2000 !important;height:100px;">
<!-- This image does not appear behind the yellow container -->
  <img src="back-image.png" width="100%" style="z-index:-2000;display:block" />
</div>
<main class="container" style="background-color:yellow;z-index:10000;">
  <!-- This is the yellow container -->
  Lorem ipsum...
</main>

感谢帮助。

4

3 回答 3

4

您所要做的就是使用position: absolute

<main class="container" style="background-color:yellow;z-index:10000;position: relative; ">
div style="z-index:-2000 !important;height:100px;">

  <img src="back-image.png" width="100%" style="z-index:-2000;display:block;position: absolute;" />
</div>

  <!-- This is the yellow container -->
  Lorem ipsum...
</main>
于 2020-01-03T21:37:32.070 回答
0

您可以直接将背景添加到容器中，例如：

.container {
    background-size: contain;
    background: url(https://storage.googleapis.com/spec-host-backup/mio-components%2Fassets%2F1cETzN6UhbVg3cqRa3Xvxlkys1FO0NZma%2Fspecs-extended-fab-default.png);
    background-repeat: repeat;
    color: yellow;
}

我设置的最后两个设置只是为了让您可以看到这里使用的背景实际上是在背景中。

我还假设您实际上并不想要容器上的黄色背景。如果您也想保留黄色背景，请告诉我。

这是更新的小提琴：https ://jsfiddle.net/poxy7Ljd/2/

韦恩

于 2020-01-03T21:18:31.923 回答
0

不确定我是否正确理解您，但您可以opacity改用：

 main > img {
   width: 100%; 
   height: auto;
   position: absolute; top: 0;
   opacity: 0.2; /* change this to your need */
 }
<main class="container" style="background-color:yellow;">
  <img src="https://storage.googleapis.com/spec-host-backup/mio-components%2Fassets%2F1cETzN6UhbVg3cqRa3Xvxlkys1FO0NZma%2Fspecs-extended-fab-default.png" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis convallis convallis tellus id interdum velit. Suspendisse sed nisi lacus sed viverra. Nullam eget felis eget nunc lobortis mattis aliquam faucibus purus. Semper auctor neque vitae tempus quam pellentesque nec. Senectus et netus et malesuada fames ac turpis. Semper viverra nam libero justo laoreet. Viverra adipiscing at in tellus integer. Scelerisque varius morbi enim nunc faucibus a pellentesque sit. Odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus. Ullamcorper morbi tincidunt ornare massa eget egestas. Ante in nibh mauris cursus mattis molestie a. Quam vulputate dignissim suspendisse in est. Odio tempor orci dapibus ultrices. Bibendum ut tristique et egestas quis ipsum suspendisse. Blandit libero volutpat sed cras. Gravida quis blandit turpis cursus in.

Eu feugiat pretium nibh ipsum consequat. Posuere urna nec tincidunt praesent semper feugiat nibh. Facilisis mauris sit amet massa vitae. Nunc sed velit dignissim sodales ut. Ac tincidunt vitae semper quis. Eget felis eget nunc lobortis mattis aliquam faucibus purus in. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at. Ac felis donec et odio. Libero justo laoreet sit amet cursus. Pretium lectus quam id leo. Mattis vulputate enim nulla aliquet. Nibh cras pulvinar mattis nunc sed blandit libero. Ultricies mi eget mauris pharetra et ultrices. Tortor posuere ac ut consequat semper viverra. Eleifend quam adipiscing vitae proin sagittis nisl. Purus faucibus ornare suspendisse sed nisi lacus.

Vestibulum rhoncus est pellentesque elit. Mi quis hendrerit dolor magna eget. Mus mauris vitae ultricies leo integer malesuada nunc. Orci dapibus ultrices in iaculis. Eget aliquet nibh praesent tristique. Venenatis urna cursus eget nunc scelerisque viverra mauris in aliquam. Commodo odio aenean sed adipiscing diam. Urna duis convallis convallis tellus id. Facilisi morbi tempus iaculis urna. Iaculis nunc sed augue lacus viverra vitae. Nam aliquam sem et tortor consequat id porta nibh. Lorem donec massa sapien faucibus et. Blandit turpis cursus in hac habitasse. Integer enim neque volutpat ac tincidunt vitae. Quam vulputate dignissim suspendisse in est ante. Amet nisl suscipit adipiscing bibendum est ultricies integer quis. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Nisl condimentum id venenatis a. Eu augue ut lectus arcu bibendum at varius vel pharetra.

Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Faucibus turpis in eu mi bibendum neque egestas. Sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque. Diam vel quam elementum pulvinar etiam. Odio ut sem nulla pharetra diam sit amet nisl suscipit. Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Amet purus gravida quis blandit turpis cursus. In est ante in nibh mauris cursus mattis molestie. Hendrerit dolor magna eget est lorem ipsum dolor. Elementum nibh tellus molestie nunc non. Et sollicitudin ac orci phasellus. Libero justo laoreet sit amet cursus sit amet dictum sit.

Magna etiam tempor orci eu lobortis elementum nibh tellus molestie. Dui accumsan sit amet nulla facilisi morbi tempus. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Venenatis lectus magna fringilla urna porttitor rhoncus dolor. Blandit aliquam etiam erat velit scelerisque. Ac tortor vitae purus faucibus ornare suspendisse sed nisi. Non blandit massa enim nec dui nunc mattis enim ut. A pellentesque sit amet porttitor eget. Dui accumsan sit amet nulla facilisi morbi tempus. Feugiat sed lectus vestibulum mattis ullamcorper velit. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices. Egestas erat imperdiet sed euismod nisi porta lorem. Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt id. Dignissim enim sit amet venenatis urna. Mauris in aliquam sem fringilla. Varius morbi enim nunc faucibus a. Tempus egestas sed sed risus pretium quam vulputate dignissim. Dolor sit amet consectetur adipiscing elit duis tristique. Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec.

Sed velit dignissim sodales ut eu sem integer. Habitant morbi tristique senectus et netus et malesuada. Velit egestas dui id ornare arcu odio ut. Nisi porta lorem mollis aliquam ut porttitor. Egestas erat imperdiet sed euismod nisi. Vivamus at augue eget arcu. Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Nunc sed velit dignissim sodales ut eu sem integer. Tincidunt dui ut ornare lectus sit. Montes nascetur ridiculus mus mauris vitae ultricies leo integer. Tellus cras adipiscing enim eu turpis egestas pretium aenean pharetra. Enim nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Cum sociis natoque penatibus et magnis dis parturient montes nascetur. Elementum sagittis vitae et leo duis ut diam quam nulla. Consectetur libero id faucibus nisl tincidunt eget nullam non nisi.

Malesuada fames ac turpis egestas. Pellentesque diam volutpat commodo sed. Egestas erat imperdiet sed euismod. Scelerisque varius morbi enim nunc faucibus. Justo nec ultrices dui sapien eget. Porttitor eget dolor morbi non arcu risus quis varius quam. Sed nisi lacus sed viverra tellus in hac habitasse platea. Amet venenatis urna cursus eget nunc scelerisque. Semper eget duis at tellus at urna condimentum. Id neque aliquam vestibulum morbi blandit cursus risus at ultrices. Risus in hendrerit gravida rutrum quisque. Diam maecenas ultricies mi eget. Egestas diam in arcu cursus euismod.

Ante metus dictum at tempor commodo ullamcorper a. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Et magnis dis parturient montes nascetur ridiculus mus mauris. Tellus at urna condimentum mattis pellentesque id nibh tortor id. Elementum facilisis leo vel fringilla est ullamcorper. Vitae nunc sed velit dignissim. Non pulvinar neque laoreet suspendisse interdum. Montes nascetur ridiculus mus mauris vitae. Id nibh tortor id aliquet lectus proin nibh. In fermentum et sollicitudin ac orci phasellus egestas. Varius morbi enim nunc faucibus a pellentesque sit. Eu ultrices vitae auctor eu augue ut. Arcu risus quis varius quam quisque id diam. Tempor orci dapibus ultrices in. In mollis nunc sed id semper risus in hendrerit. Mattis nunc sed blandit libero volutpat sed cras ornare.

Eget mi proin sed libero enim sed faucibus turpis. Ac felis donec et odio pellentesque diam volutpat. Augue neque gravida in fermentum. Ullamcorper eget nulla facilisi etiam. Pellentesque id nibh tortor id aliquet lectus. Sagittis purus sit amet volutpat consequat mauris. Orci phasellus egestas tellus rutrum tellus. Dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Quam lacus suspendisse faucibus interdum posuere lorem. Quis varius quam quisque id diam vel quam elementum pulvinar. At quis risus sed vulputate odio. Tincidunt vitae semper quis lectus nulla at. Semper risus in hendrerit gravida rutrum. In hac habitasse platea dictumst quisque sagittis purus. Ut tristique et egestas quis.

Odio tempor orci dapibus ultrices. Sollicitudin ac orci phasellus egestas tellus rutrum. Dui accumsan sit amet nulla facilisi morbi tempus iaculis urna. Facilisis magna etiam tempor orci eu lobortis. Dui nunc mattis enim ut tellus elementum sagittis vitae. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam purus. Duis tristique sollicitudin nibh sit amet. Mi proin sed libero enim sed faucibus turpis in. Sit amet cursus sit amet dictum sit. Et pharetra pharetra massa massa ultricies mi quis hendrerit. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Duis convallis convallis tellus id interdum. Scelerisque fermentum dui faucibus in. Dolor sit amet consectetur adipiscing. Diam sit amet nisl suscipit adipiscing bibendum est ultricies.

Velit sed ullamcorper morbi tincidunt. A erat nam at lectus urna duis convallis convallis. Tellus molestie nunc non blandit massa enim. At risus viverra adipiscing at in. Sit amet facilisis magna etiam tempor. Ut tortor pretium viverra suspendisse potenti. Elementum curabitur vitae nunc sed velit dignissim sodales ut. Sit amet nisl suscipit adipiscing bibendum est ultricies integer. Mauris in aliquam sem fringilla. Sapien et ligula ullamcorper malesuada proin libero nunc. Pellentesque dignissim enim sit amet venenatis urna cursus eget nunc. Eget nullam non nisi est sit amet facilisis magna etiam. Adipiscing commodo elit at imperdiet dui accumsan. In nibh mauris cursus mattis molestie a.

Tristique senectus et netus et malesuada fames. Eget magna fermentum iaculis eu non diam. Egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. A erat nam at lectus urna duis. In ante metus dictum at tempor commodo ullamcorper. Elementum pulvinar etiam non quam lacus suspendisse faucibus interdum posuere. Purus in massa tempor nec. Mauris in aliquam sem fringilla ut morbi. Lacus vestibulum sed arcu non odio euismod lacinia. Facilisis magna etiam tempor orci eu lobortis elementum nibh. Accumsan in nisl nisi scelerisque eu ultrices vitae auctor eu.

Pulvinar mattis nunc sed blandit libero volutpat sed cras ornare. At consectetur lorem donec massa sapien faucibus et. Nulla facilisi etiam dignissim diam. Vivamus arcu felis bibendum ut tristique et egestas quis ipsum. Hac habitasse platea dictumst quisque sagittis purus sit amet. Sit amet nisl suscipit adipiscing bibendum est ultricies. Iaculis nunc sed augue lacus viverra vitae congue eu. Tempus quam pellentesque nec nam aliquam sem et. Fames ac turpis egestas sed tempus urna et pharetra. Cursus in hac habitasse platea. Dignissim suspendisse in est ante in. Odio ut enim blandit volutpat maecenas volutpat blandit. Erat imperdiet sed euismod nisi porta lorem mollis aliquam ut. Tortor consequat id porta nibh venenatis cras. Lacus luctus accumsan tortor posuere. Adipiscing elit ut aliquam purus. Tincidunt praesent semper feugiat nibh sed. Fames ac turpis egestas integer eget aliquet nibh praesent tristique. Mattis rhoncus urna neque viverra justo.

A arcu cursus vitae congue mauris rhoncus. Volutpat est velit egestas dui id ornare arcu odio. At erat pellentesque adipiscing commodo elit at imperdiet dui. Vitae congue eu consequat ac felis donec et. Amet risus nullam eget felis eget. Pellentesque pulvinar pellentesque habitant morbi tristique senectus. Aliquet lectus proin nibh nisl condimentum. Eu mi bibendum neque egestas congue quisque egestas. Viverra adipiscing at in tellus integer feugiat scelerisque varius. Cursus in hac habitasse platea dictumst quisque sagittis purus. Sit amet est placerat in egestas. Malesuada fames ac turpis egestas. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Turpis massa tincidunt dui ut.

Integer feugiat scelerisque varius morbi enim nunc faucibus a pellentesque. Non nisi est sit amet facilisis. Nibh sed pulvinar proin gravida hendrerit lectus a. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Pharetra sit amet aliquam id diam. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Elementum pulvinar etiam non quam lacus suspendisse faucibus interdum. Purus sit amet volutpat consequat mauris nunc congue nisi. Ullamcorper a lacus vestibulum sed. Lectus vestibulum mattis ullamcorper velit sed ullamcorper. At volutpat diam ut venenatis. Ipsum faucibus vitae aliquet nec ullamcorper sit amet. Eget velit aliquet sagittis id consectetur purus ut. Nunc eget lorem dolor sed viverra ipsum nunc aliquet bibendum.

Pharetra diam sit amet nisl suscipit adipiscing bibendum. Nullam non nisi est sit amet facilisis. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Nulla posuere sollicitudin aliquam ultrices sagittis. Volutpat maecenas volutpat blandit aliquam. Sit amet consectetur adipiscing elit ut aliquam purus sit. Bibendum neque egestas congue quisque egestas. Ut tristique et egestas quis ipsum suspendisse ultrices. Et pharetra pharetra massa massa ultricies mi. Eget nunc lobortis mattis aliquam faucibus purus in massa tempor. Fusce ut placerat orci nulla pellentesque. Enim nec dui nunc mattis enim ut. Vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor posuere. Elementum facilisis leo vel fringilla est ullamcorper.

Condimentum mattis pellentesque id nibh tortor. Dictum sit amet justo donec enim. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit sed. A erat nam at lectus urna duis convallis convallis tellus. Elementum integer enim neque volutpat. Tellus id interdum velit laoreet id donec. Ut tristique et egestas quis ipsum. Tincidunt id aliquet risus feugiat in ante metus. Vulputate eu scelerisque felis imperdiet proin fermentum leo vel orci. Est sit amet facilisis magna etiam tempor.

Tincidunt arcu non sodales neque sodales ut etiam. Facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Diam maecenas sed enim ut sem viverra aliquet eget sit. Est ante in nibh mauris cursus. Viverra mauris in aliquam sem fringilla ut morbi tincidunt. Id aliquet risus feugiat in ante metus dictum at tempor. Euismod quis viverra nibh cras pulvinar. Sem viverra aliquet eget sit amet tellus. Lectus nulla at volutpat diam ut. Lacus laoreet non curabitur gravida arcu ac tortor dignissim convallis.

Curabitur vitae nunc sed velit dignissim sodales ut. Tristique senectus et netus et. Non blandit massa enim nec dui nunc mattis enim ut. Faucibus a pellentesque sit amet porttitor eget dolor. Nulla aliquet enim tortor at auctor urna nunc id cursus. Vitae purus faucibus ornare suspendisse sed. Est sit amet facilisis magna etiam tempor. Praesent elementum facilisis leo vel. Nibh nisl condimentum id venenatis. Consequat id porta nibh venenatis cras sed felis eget. Sit amet volutpat consequat mauris nunc congue nisi. Sed augue lacus viverra vitae congue eu consequat. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque. Sem et tortor consequat id. Aliquam purus sit amet luctus. Quis ipsum suspendisse ultrices gravida. Scelerisque fermentum dui faucibus in ornare quam viverra. Sodales neque sodales ut etiam sit amet.

Suspendisse interdum consectetur libero id. Nisl nisi scelerisque eu ultrices vitae auctor eu augue. Integer eget aliquet nibh praesent tristique magna sit amet purus. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla. Praesent tristique magna sit amet purus gravida. In pellentesque massa placerat duis ultricies lacus sed turpis. Eget lorem dolor sed viverra ipsum nunc. Nunc sed blandit libero volutpat sed cras ornare arcu. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Augue interdum velit euismod in. Platea dictumst quisque sagittis purus sit amet. Ut diam quam nulla porttitor massa. Leo duis ut diam quam nulla porttitor. Non pulvinar neque laoreet suspendisse interdum consectetur libero. Pharetra diam sit amet nisl suscipit adipiscing bibendum. Ultrices neque ornare aenean euismod elementum nisi quis eleifend quam. Fusce id velit ut tortor pretium viverra. In hac habitasse platea dictumst quisque sagittis.
    </main>

于 2020-01-03T21:31:38.727 回答