Question

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

CSS：

th:onclick="'javascript:confirmDelete(' + ${company.id} + ');'"

Answer 1

您不能将元素的一部分作为一个不透明度，而将该元素的另一部分作为另一个不透明度。

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

尝试使用rgba（）代替背景色 - 或者将元素包装在某个东西中。

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

Answer 2

添加另一个包含当前div的div。删除#box上的border属性以及width和height属性，并将其添加到包含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仍然有一个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>

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

3 个答案: