具有重复背景的 div 内具有透明背景的 div答案

【问题标题】：Div with a transparent background inside div with a repeating background具有重复背景的 div 内具有透明背景的 div
【发布时间】：2017-02-21 11:35:08
【问题描述】：

我有一个高度为 100% 的 #div1 和 #div1 内的 #div2。 #div2 位于#div1 的顶部，背景为半透明。但是，因为#div1有一个重复的背景，所以#div2下面的半透明就是#div1的背景。我想从 #div2 的高度顶部“移动”#div1 的背景

see image

CSS：

#div1 {
    border: none;
    width: 812px;
    height: 100%;
    background-image: url(http://i.imgur.com/tcPWRzF.png);
    background-repeat: repeat-y;
    margin: 0 auto;
}
#div2 {
    background-image: url(http://i.imgur.com/DnDnz22.png);
    background-color: transparent;
    background-position: center;
    width: 812px;
    height: 488px;
}

HTML：

<div id="div1">
<div id="div2">
</div>

【问题讨论】：

#div1 { background-position: ???px 0px ] 其中??? 是#div2 的高度。
好的，我添加了代码
我认为将 div2 首先放在 div1 放在后面会更简单，而不是放在彼此之上，如果这就是你想要的效果的话。
我无法更改标记，只能更改 CSS。你下面的答案很完美

标签： html css

【解决方案1】：

尝试使用 flexbox 替代块级对齐

#div1 {
    border: none;
    width: 812px;
    min-height:1200px;
    height: 100%;
    background-image: url(http://i.imgur.com/tcPWRzF.png);
    background-repeat: repeat-y;
    margin: 0 auto;
     display: flex;               /* establish flex container */
    align-items: center;  
}
#div2 {
    background-image: url(http://i.imgur.com/DnDnz22.png);
    background-color: transparent;
    background-position: center;
    width: 812px;
    height: 488px;
}

<div id="div1">
<div id="div2">
</div>

电脑：Michael_B

【讨论】：

【解决方案2】：

由于某种原因，div1 中的图像没有重复。我不知道这是否适合你，但你可以尝试一下。

<!DOCTYPE html>
<html>
<head>
<title>page title</title>
<style>
#div1 {
    position: relative;
    top: 75px;
    border: none;
    width: 812px;
    height: 100%;
    background-image: url(http://i.imgur.com/tcPWRzF.png);
    background-repeat: repeat-y;
    margin: 0 auto;
}
#div2 {
    position: relative;
    top: -75px;
    background-image: url(http://i.imgur.com/DnDnz22.png);
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: center;
    width: 812px;
    height: 488px;
}
</style>
</head>

<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>

【讨论】：

【解决方案3】：

给 div1 一个小窗口，让其通过 padding-top 显示出来。 http://codepen.io/amishstripclub/pen/VKdjmr

#div1 {
    padding-top: 488px;
}

【讨论】：

不工作。或者，也许我不明白什么。如果在代码中替换我上面给出的背景图像 (#div1 -i.imgur.com/tcPWRzF.png, #div2 - i.imgur.com/DnDnz22.png) ，情况是这样的：take.ms/zeJkr