如何制作具有非透明边框的透明 div

Question

我创建了一个白色div，并给它一个0.4的不透明度，然后我给了它一个黑色边框。 但是，因为我使div 透明，所以边框也是透明的。如何在保持div 透明的同时使边框不透明？

.CSS：

#box{
   background-color:white;
   opacity:0.4;
   width:600px;
   height:200px;
   border-radius:15px;
   border: 5px solid black;
}

Answer 1

不能使元素的一部分成为一种不透明度，而使同一元素的另一部分成为另一种不透明度。

这是一个愚蠢的例子：https://jsfiddle.net/sheriffderek/85utzq4p/

尝试使用 rgba(( 作为背景颜色 - 或将元素包装在某物中。

.box {
  background: rgba(255, 0, 0, .5);
}

Answer 2

添加另一个包含当前div 的div。 删除#box上的边框属性以及宽度和高度属性，并将其添加到另一个包含div 的属性。 确保包含的div 具有类而不是 id。举个例子：

.entirebox {
  width: 600px;
  height: 200px;
  border-radius: 15px;
  border: 5px solid black;
}
#box {
  background-color: white;
  opacity: 0.4;
}

<div class="entirebox">
  <div id="box">
    <p>The stuff that you originally had here</p>
  </div>
</div>

在这里，我添加了包含的div并将其命名为entirebox。请注意，包含div 的div 有一个类，而你开始时使用的div 仍然有一个 id。

希望这有帮助。

Answer 3

如果您正在寻找可以处理纯色背景和图像背景的东西，您可以创建另一个父级并按这种方式设置它：

body{
  margin: 0px;
  }
div.child {
  display: block;
  position: relative;
  width: 200px;
  height: 150px;
  background: red;
  opacity:0.3;
}
div.parent{
  display: inline-block;
  position:relative;
  border: 4px solid black;
  top: 0px;
  left: 0px;
}
  

<div class="parent">
    <div class="child">
    </div>
</div>