Css 元素之间的背景放置_Css

Css 元素之间的背景放置

css

Css 元素之间的背景放置,css,Css,我有一个问题，是否有可能从第二个div的背景也将在我的下一个div中可见 <div style="max-width:100%;width:100%;"> ... </div> <div style="max-width:100%;width:100%; background:url('someimage.png')"> ... </div> <div style="max-width:120

我有一个问题，是否有可能从第二个div的背景也将在我的下一个div中可见

<div style="max-width:100%;width:100%;">
...
</div>
<div style="max-width:100%;width:100%; background:url('someimage.png')">
...
</div>
<div style="max-width:1200px; width:100%">
...
</div>


...
...
...

或者我必须使用图像并将其定位为绝对：

<div style="max-width:100%;width:100%;">
...
</div>
<div style="max-width:100%;width:100%;position:relative;z-index:2">
...
</div>
<img src="someimage.png" style="position:absolute;width:100%;height:300px;z-index:1" />
<div style="max-width:1200px; width:100%;position:relative;z-index:2;">
...
</div>


...
...
...

但在图像的情况下，我将无法将其相对于第二个div正确定位

除非另有办法

需要这样的东西：如果您想要水印之类的东西

您需要在div和img中定义

位置

Img需要是

位置：绝对


您需要在div和img中定义位置。
Img需要位置：绝对。
但若你们想设置背景，更好的解决方案是
或者像一张卡片

.卡片{
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
过渡：0.3s；
宽度：40%；
}
.card>img{
填充顶部：16px；
显示：块；
保证金：0自动；
}
.集装箱{
填充：2x16px；
}
卡片
无名氏
建筑师和工程师


还是混合解决方案

.卡片{
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
过渡：0.3s；
宽度：40%；
高度：300px；
背景图片：url（“img_avatar.png”）；
}
.集装箱{
填充：2x16px；
}
无名氏
建筑师和工程师

我无法清楚地理解您的问题，请使用图片或其他方式：添加图像以显示我需要的内容。不能在身体上使用它，因为我们总共有6个块，应该使用共享背景。每一对都有自己的形象，其中一些甚至超过了3个街区。。。你想要一张卡片还是类似的？我将编辑我的答案。看看是否有帮助！是的，有点像一张卡片，虽然我不能准确地把那两个div包装在另一个里面。。guess必须为每个可能的分辨率使用每个图像的绝对位置。为什么不呢？为了响应，您需要在另一个div中“打包”。如果必须在页眉/页脚之间共享图像，则不能在div中包装它。
<style>
.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 40%;
}

.card > img {
  padding-top: 16px;
  display: block;
  margin: 0 auto;
}

.container {
  padding: 2px 16px;
}
</style>
</head>
<body>

<h2>Card</h2>

<div class="card">
  <img src="img_avatar.png" alt="Avatar" style="width:30%">
  <div class="container">
    <h4><b>John Doe</b></h4> 
    <p>Architect & Engineer</p> 
  </div>
</div>

<style>
.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 40%;
  height: 300px;
  background-image: url("img_avatar.png");
}

.container {
  padding: 2px 16px;
}
</style>
</head>
<body>

<div class="card">
  <div class="container">
    <h4><b>John Doe</b></h4> 
    <p>Architect & Engineer</p> 
  </div>
</div>