Question

我最近一直在玩一些HTML / CSS，我注意到我对我的div非常草率，我希望我的代码更加干净和可重复使用。所以我开始了一个新项目，我已经遇到过一个最大的问题，这就是我的代码：

  <div class="container">
    <div class="jumbotron">
      <div class="jumbotron-header">
        <h1>Header name</h1>
      </div>
    </div>
  </div>

.jumbotron {
  width: 350px;
  height: 80vh;
  position: relative;
  background-color: #5a5955;
  opacity: .3;
  margin-left: auto;
  margin-right: auto;
  top: 20px;
  border-radius: 10px;
}

.jumbotron-header {
  color: white;
}

所以，认为jumbotrons标题应该在jumbotrons div标签内是合乎逻辑的，对吗？这样它就嵌在了jumbotron的内部。除了现在标题内的所有文本都受到jumbotron的不透明度的影响，所以为了“修复”这个，我会将标题标记移到jumbotron标记之外，如下所示：

  <div class="container">
    <div class="jumbotron"></div>
    <div class="jumbotron-header">
      <h1>Header name</h1>
    </div>
  </div>

这就是让我的代码变得如此草率的原因，就像走在矿场上一样，一旦我深入到一个项目中，我甚至害怕触摸HTML。所以我只是想知道什么是正确的，我应该做什么？

Answer 1

您的原始HTML非常好。实际上，将结构更改为其他任何内容都会使其更少语义并且更难以使用。您使用opacity时遇到的问题是它会影响应用它的元素的每个颜色属性，而不仅仅是其中之一。

看起来您正在尝试使用opacity使背景半透明（透明，但不清晰）。相反，您应该使用rgba(<red>, <green>, <blue>, <alpha>)函数将背景颜色设置为半透明。在这里，<alpha>是您用于opacity的值。

.jumbotron {
  ...
  /* rgba() only takes decimal values. Your color of #5a5955 is equivalent
     to (90, 89, 85) in decimal. */
  background-color: rgba(90, 89, 85, 0.3);
  ...
}

这应保持.jumbotron-header的不透明度以及.jumbotron内的所有其他内容。

请记住，HTML用于定义页面的结构，CSS用于定义样式。这些是不同的东西，你永远不应该更改一个以使另一个工作。

Answer 2

如果你想做的就是让你的div嵌套而不受不透明度的影响，那么你可以使用rgba作为背景颜色。

background-color: rgba(90,89,85,0.3); 将#color值简单转换为rgb和presto！

使用此替代当前背景颜色并删除不透明度选项。

应该嵌套哪些Div，哪个不应该？

2 个答案: