文本结束后立即停止背景颜色

Question

我有一个名为title-inverse的div，我在其后面放置了不同的背景颜色。容器是黑色的，title-inverse有白色背景颜色。我想要在标题结束后立即停止白色背景颜色。

有人看到我做错了吗？

这张图片中的蓝色是我想要黑色的地方。

.section-wrap {
	height: 80vh;
	width: 100%;
	position: relative;
}
.section-block {
	height: 100%;
	display: inline-block;
	vertical-align: top;
	position: relative;
	overflow: hidden;
}
.sec-text {
	width: 30%;
	background: #000;
}
.section-content-left, .section-content-right {
	width: 70%;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.title-inverse {
	background: #FFF;
	color: #000;
	padding: 5px 10px 2px 15px;
	font-family: 'Roboto', sans-serif;
	font-size: .8rem;
	font-weight: 500;
	line-height: 1.4em;
	margin-top: 15%;
	display: inline-block;
}
.section-title:after {
	margin-top: 3px;
	height: 2px;
	width: 70px;
	background: #C3C3C3;
	display: block;
}
.section-description, #about-list li {
	color: #777;
	font-family: 'Roboto', sans-serif;
	font-size: .5rem;
	line-height: 1.5em;
	padding-top: 30px;
}

<section class="section-wrap">
    <div class="section-block right sec-img">
        <div id="img2" class="back" title=""></div>
    </div>
    <div class="section-block sec-text left">
        <h2 class="title-inverse">ALUMINUM EXTRUDED PROFILE</h2>
        <div class="section-content-right" id="right-sec2">
            
            <p class="section-description">
                Our team has worked with both small start-ups to established corporations with the task of enhancing their online presence by refining 
                their brand to reach optimum user communication. Our ultimate goal is to improve brand awareness, while making connections with the clients' user-base. 
            </p>
        </div>
    </div>
</section>

Answer 1

可能接近您想要的一个选项是box-decoration-break，但它是一个实验性功能，因此支持不是很好（尤其是IE和Edge）：https://caniuse.com/#feat=css-boxdecorationbreak

html,
body {
  height: 100%;
  margin: 0;
}

.section-wrap {
  width: 600px;
  position: relative;
  height: 100%;
}

.section-block {
  height: 100%;
  display: inline-block;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

.sec-text {
  width: 30%;
  background: #000;
}

.section-content-left,
.section-content-right {
  width: 70%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.title-inverse {
  font-family: 'Roboto', sans-serif;
  font-size: .8rem;
  font-weight: 500;
  line-height: 1.4em;
  margin-top: 15%;
}

.title-text {
  background: #FFF;
  color: #000;
  padding: 5px 10px 2px 15px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.section-description {
  color: #777;
  font-family: 'Roboto', sans-serif;
  font-size: .5rem;
  line-height: 1.5em;
  padding-top: 30px;
}

<section class="section-wrap">

  <div class="section-block right sec-img">
    <div id="img2" class="back" title=""></div>
  </div>
  
  <div class="section-block sec-text left">
    <h2 class="title-inverse"><span class="title-text">ALUMINUM EXTRUDED PROFILE</span></h2>
    
    <div class="section-content-right" id="right-sec2">
      <p class="section-description">
        Our team has worked with both small start-ups to established corporations with the task of enhancing their online presence by refining their brand to... 
      </p>
    </div>
  </div>
  
</section>

基本上，我将标题更改为：

<h2 class="title-inverse"><span class="title-text">ALUMINUM EXTRUDED PROFILE</span></h2>

它的CSS规则为：

.title-inverse {
    font-family: 'Roboto', sans-serif;
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.4em;
    margin-top: 15%;
}

.title-text {
    background: #FFF;
    color: #000;
    padding: 5px 10px 2px 15px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}