让孙元素将祖父元素内容作为背景

Question

我有一个外部div，有两个div。

一个div用作背景并具有背景图像，另一个用作内容并且具有#fff的背景颜色，用作内容的那个具有标题和输入。

我正在尝试为我的输入设置边框，这显示内容div背后的内容。

因为背景div的比例在悬停时变化（在pupose上），所以改变输入边框的样子应该是这样。

所以我决定将div作为输入的边界。 但是我一直试图让边框显示内容div背后的内容。

以下是代码：

#chat_bi{
	 position: absolute;
  left: 0;
top:0;

 background-repeat: no-repeat;
	background-image: url("http://wallpapercave.com/wp/GProxpt.jpg");
	background-size: cover;
	z-index: -1;
	filter: brightness(60%);
	height: 100%;
	width: 100%;
	    transition: 0.5s;
	
}
#outer_div_chat{
display: flex;
justify-content: center;
align-items: center;
	position: relative;
	height: calc(100% - 400px);
	padding: 50px;
	
}
.chat{
	padding: 15px;
	z-index: 2;
	    box-shadow: 0px 0px 15px rgba(0,0,0,0.3);
	    background-color: #fff;
}
#outer_div_chat:hover #chat_bi{
    width:  105% !important;
    height:  105% !important;
	filter:  brightness(95%);
}
#start_up_chat_div{
	display: flex;
	flex-direction: column;
}
/*text-input*/
.text_input_div{

	padding:5px;
	background-image:  url("http://wallpapercave.com/wp/GProxpt.jpg");
	
}
.text_input{
	outline:none;
	padding:2px 4px;
	border:none;
	width: 100%;
	box-sizing: border-box;
}

<div style="height:625px; overflow:hidden;">
<div id="outer_div_chat">
			<div id="chat_bi"></div>
			<div class="chat">
				<div id="start_up_chat_div" >
					<span style="padding-bottom: 10px;">Random text</span>
					<div class="text_input_div">
						<input type="text" class="text_input">
					</div>
				</div>
			</div>
		</div>
 </div>

我猜测有一个解决方案正在应用，相同的背景到输入div的边框，在相同的位置和大小，但我想知道是否有另一种方式，更合适的方式。< / p>

Answer 1

您可以尝试这样的事情：

CSS

Status: Selected port usually in use by a different protocol.
Status: Resolving address of xxxxxxxxxxxxxxxxxxxxxx
Status: Connecting to xxx.xxx.xxx.xxx:xx...
Status: Connection established, waiting for welcome message...
Status: Initializing TLS...
Status: Verifying certificate...
Status: TLS connection established.
Status: Logged in
Status: Retrieving directory listing of "xxxxxxxxxxxxx"...
Status: Directory listing of "xxxxxxxxxxxxx" successful

HTML

.bigcrazydivwithbackground {
background: url('https://images.pexels.com/photos/28477/pexels-photo-28477.jpg?w=1260&h=750&auto=compress&cs=tinysrgb');
}

.crazytitle {
background: white;
padding: 10px;
}

.crazyinner {
border: 20px solid white;
}

.crazyinputwrapper {
margin: 20px;
}

input {
display: block;
width: 100%;
background: white;
line-height: 20px;
border: none;
}

https://jsfiddle.net/hLphc3nu/

Answer 2

也许不是位置：绝对和位置：相对，使它们两个位置：绝对所以z-index将起作用。有时使用负z-index也可能是问题所在。

从0开始向上，而不是使用-1。例如，将包含输入和标签的div设置为z-index为100，并将要放在其后面的图像的z-index设置为50。