Question

我有＃div1，高度为100％，＃div2位于＃div1。 #div2位于＃div1的顶部，背景为半透明。但是，因为＃div1具有重复背景，＃div2下的半透明是＃div1的背景。我想＆＃34;移动＆＃34; ＃div1从＃div2

高度顶部的背景

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>

Answer 1

给div1一个小窗口，通过给它填充顶部来显示。 http://codepen.io/amishstripclub/pen/VKdjmr

RewriteCond %{HTTP_HOST} !^(www|staging)\. [NC]
RewriteCond %{HTTP_HOST} ^(.*)\.(.*)\.de [NC]
RewriteCond %{REQUEST_URI} !^(foo|foo2)[NC] # <== not working
RewriteRule (.*) https://www.%2.de/foo/%1-foo.html [R=301,L]

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

Answer 3

尝试使用flexbox替代块级别对齐

＆＃13;

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

＆＃13;

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

＆＃13;

PC：Michael_B

Div内部带有透明背景的div，背景为重复

3 个答案: