html - 使孙元素具有祖父元素内容作为背景

Question

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

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

我正在尝试为我的输入制作边框，以显示内容 div 后面的内容。

因为悬停时背景 div 的比例会发生变化(有意)，因此会改变输入框的外观。

所以我决定将一个 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 边框的背景相同，位置和大小相同，但我想知道是否有另一种解决方法，一种更合适的解决方法。

Answer 1

你可以尝试这样的事情:

CSS

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

HTML

<div class="bigcrazydivwithbackground">
<div class="crazybox">
<div class="crazytitle">
    Title
</div>

<div class="crazyinner">
    <div class="crazyinputwrapper">
    <input type="text" />
    </div>

</div>

</div>
</div>

https://jsfiddle.net/hLphc3nu/