html - 涉及 z-index 和透明度的 CSS 样式效果

Question

我正在尝试实现接近此处代码段的设计。我的问题是我找不到通过简单的透明度替换 .title 的蓝色背景的方法(以便容器的背景保持可见)。如果我简单地删除蓝色背景，边框就会在 .title 所在的位置可见。

此外，“标题”是由 JS 生成的，因此我无法可靠地预测 div 的长度，因为它可能会根据情况略有不同。

.container {
  width: 350px;
  height: 250px;
  display: flex;
	justify-content: center;
	align-items: center;
  position: relative;
  background: url('https://i.pinimg.com/736x/94/90/19/9490199f30fc9db039de091205e73be6--backgrounds-wallpapers-phone-backgrounds.jpg');
}

.zone {
  position: relative;
  display: flex;
	justify-content: center;
	align-items: center;
  margin: 0 0 20px 0;
  text-align: center;
}

.title {
  position: relative;
  display: flex;
	justify-content: center;
	align-items: center;
  position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
}

.title span {
  display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	height: 20px;
	color: hsla(200, 70%, 20%, 1);
	cursor: default;
	background: hsla(200, 70%, 55%, 1);
}

.content {
  position: relative;
  display: flex;
	justify-content: center;
	align-items: center;
  padding: 30px 30px 20px 30px;
	width: 200px;
	border: 0.1rem solid hsla(200, 70%, 20%, 1);
	border-radius: 0rem;
	margin-top: 10px;
 }

<div class="container">
  <div class="zone">
    <div class="title">
      <span>Text Title</span>
    </div>
    <div class="content"></div>
  </div>
</div>

有没有人知道如何实现我想要做的事情？如果我的解释过于简短或不清楚，请告诉我。

谢谢!

Answer 1

你可以用伪元素来实现。看看这个:

.container {
  width: 350px;
  height: 250px;
  display: flex;
	justify-content: center;
	align-items: center;
  position: relative;
  background: url('https://i.pinimg.com/736x/94/90/19/9490199f30fc9db039de091205e73be6--backgrounds-wallpapers-phone-backgrounds.jpg');
}

.zone {
  position: relative;
  display: flex;
	justify-content: center;
	align-items: center;
  margin: 0 0 20px 0;
  text-align: center;
}

.title {
  position: relative;
  display: flex;
	justify-content: center;
	align-items: center;
  position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
}

.title span {
  display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	height: 20px;
	color: hsla(200, 70%, 20%, 1);
	cursor: default;
}

.title span::before,
.title span::after{
  content: "";
  height: 2px;
  position: absolute;
  background: hsla(200, 70%, 20%, 1);
  width: calc(50% - 40px);
  top: 9px;
}

.title span::before{
  left: 0;
}

.title span::after{
  right: 0;
}

.content {
  position: relative;
  display: flex;
	justify-content: center;
	align-items: center;
  padding: 30px 30px 20px 30px;
	width: 200px;
	border-right: 0.1rem solid hsla(200, 70%, 20%, 1);
  border-left: 0.1rem solid hsla(200, 70%, 20%, 1);
  border-bottom: 0.1rem solid hsla(200, 70%, 20%, 1);
	border-radius: 0rem;
	margin-top: 10px;
 }

<div class="container">
  <div class="zone">
    <div class="title">
      <span>Text Title</span>
    </div>
    <div class="content"></div>
  </div>
</div>