Question

我试图在这里尝试接近片段的设计。我的问题是，我无法通过简单的透明度找到替换.title的蓝色背景的方法（以便容器的背景保持可见）。如果我只删除蓝色背景，则.title所在的边框变为可见。

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

＆＃13;

.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;
 }

＆＃13;

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

＆＃13;

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

谢谢！

Answer 1

您可以使用伪元素实现此目的。看看这个：

＆＃13;

.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;
 }

＆＃13;

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

＆＃13;

Answer 2

您可以通过添加更多元素来获得所需的效果

＆＃13;

.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__text {
  flex: 0 0 auto;
	padding: 0 10px;
	height: 20px;
	color: hsla(200, 70%, 20%, 1);
	cursor: default;
/* 	background: hsla(200, 70%, 55%, 1); */
}

.title__border {
  flex: 1;
  border-top: 0.1rem solid hsla(200, 70%, 20%, 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-top: 0.1rem solid transparent;
	border-radius: 0rem;
	margin-top: 10px;
 }

＆＃13;

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

＆＃13;

并且不要使用像.title span这样的选择器。它们不针对特定元素，它们使用的样式不能在其他地方重用，这意味着代码重复过多。每当你更改代码时，元素选择器（如.title span）也可能会导致问题（你在.title元素中选择所有跨度）（添加另一个不同样式的跨度很难），这意味着更多重复的代码！重复的代码=更复杂的代码=更难维护的代码！

您应该get BEM或SMACSS或任何其他方法（您甚至可以创建自己的方法）。

Answer 3

您可以尝试使用带有图例的字段集而不是div：

https://jsfiddle.net/v9p60p6g/1/

<html>

<head>
  <style>
    .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');
    }

    fieldset {
      border: solid black 2px;
    }

    legend {

    }

  </style>
</head>

<body>
  <div class="container">
    <fieldset>
      <legend>Testtitel</legend>
      Content
    </fieldset>
  </div>

</body>

</html>

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

3 个答案: