Question

我希望你能帮我一把，我试图把一个div放在一个div中，但是一个人继续把对方拉下来。

我会粘贴一些图片：

这就是我想要完成的事情...... enter image description here

这就是我得到的...... enter image description here

一个简短的解释：

我需要这个＆＃34;褪色＆＃34;框在页面的中心，然后，我需要这个＆＃34; NEW WAVE＆＃34;文本在所述框内，我遇到的一个问题是，如果我将它们放在同一个div中，文本将继承＆＃34; faded＆＃34;条件，但如果我把它们放在不同的div中，＆＃34;褪色＆＃34;框按下文本的div。我想我已经尝试了解决这个问题的常用方法，但没有任何反应，但是，我只是从HTML和CSS开始，所以很明显我错过了一些东西。

现在我将保留HTML和CSS：

HTML：

<div class="dimmed">
            <div class="dim-back"></div>
            <div class="new-wave">
              <h2>NEW WAVE</h2>
            </div>

        </div>

CSS（对于这个我将发布图像）：

enter image description here

谢谢。

Answer 1

好的，既然你还没有展示你的CSS。

使用Bootstrap时我通常最终会犯的主要错误是我启动和关闭div标签

你当前的结构恰好是这样的。

<div class="dimmed">
            <div class="dim-back"></div>
            <div class="new-wave">
              <h2>NEW WAVE</h2>
            </div>

        </div>

尝试嵌套像这样的div标签

<div class="dimmed">
            <div class="dim-back">
            <div class="new-wave">
              <h2>NEW WAVE</h2>
            </div>
        </div>
     </div>

Answer 2

这是解决方案。你现在要做的就是根据需要改变背景颜色，尺寸和其他基本css。我想这就是你想要达到的目标 - 在一个标题位于中间的方框内。

＆＃13;

.dimmed{width:500px;height:300px;background:blue;
        display:flex;
        align-items:center;
        justify-content:center}

.dim-back{width:300px;height:150px;background:red;
        border:5px white solid;
        display:flex;
        align-items:center;
        justify-content:center}

＆＃13;

<div class="dimmed">
	<div class="dim-back">
		<div class="new-wave"><h2>NEW WAVE</h2></div>
	</div>
</div>

＆＃13;

而不是背景：蓝色使用背景：rgba（0,0,0，.3），最后一个值（.3）是不透明度（称为alpha）。您不需要红框背景。这样它看起来就像你想要的那样。

<强>更新删除一些<div>后，可以获得相同的结果。检查此解决方案。没有什么比这更容易了。

＆＃13;

.dimmed{width:500px;height:300px;
        background:rgba(0,0,0,.3);
        display:flex;
        align-items:center;
        justify-content:center}
h2{width:300px;height:150px;
        border:5px white solid;
        display:flex;
        align-items:center;
        justify-content:center}

＆＃13;

<div class="dimmed">
	<h2>NEW WAVE</h2>
</div>

＆＃13;

您可以对<h2>标签使用填充而不是尺寸。在这种情况下，填充和边框是您唯一需要的。这取决于你放在h2标签中的内容（块图像或文本）。

试图将box div放在另一个box div中

2 个答案: