Question

小提琴：https://jsfiddle.net/jzhang172/yh1gykgs/1/

我试图让标题“Hello”背景变得透明....但我不希望白色div边框交叉进入“Hello”标题背景。我不知道如何做到这一点。

小提琴中的第二部分是我想要达到的效果。

img{
width:100%;
height:100%;
}
.header{
	padding-top:10px;

}

.section{
position:relative;
}

#second{
	height:635px;
	padding-top
}
.about-us-info {
    margin: 0 auto;
    width: 900px;
    height: 313px;
    border: 2px solid #3c3c3c;
    position: absolute;
    left: 50%;
    margin-left: -450px;
    top: 50%;
    margin-top: -160px;
}
span.span-header {
    text-align: center;
    display: block;
    /* margin-top: -22px; */
    position: relative;
    font-size: 34px;
    background: white;
    width: 420px;
    margin: 0 auto;
    margin-top: -21px;
    /* border: 1px solid black; */
    text-transform: uppercase;
    font-family: latobold;
}
.about-us-info p {
    text-align: center;
    /* line-height: 28px; */
    line-height: 1.65em;
 
}
.about-us-info p.first {

    margin-top:35px;
}
/*--------------------------------------Third Section--*/

#services-info{
	height:250px;
	margin-top:-125px;
	border:2px solid white;
}
#services-header{
background:red;
color:white;

}

/*--------------------------------------Fourth Section--*/

	<div class="section" id="third">
		<img src="http://www.wildlifetrusts.org/sites/default/files/images/Planting%20along%20realigned%20River%20Chelt%20Gloucs%20WT,%20EA%20and%20landowner2%20comp.jpg">
     <div class="about-us-info" id="services-info">
   	        <span class="span-header" id="services-header">Hello</span>
   	        <p class="first">Blah Blah <br>
   	        Blah BLah
   	        </p>
   	        <p> Blah Blah <br>
   	        	Blah Blah<br>
   	        	Blah Blah <br>
   	        	Blah Blah<br>
   	        	Blah Blah
            </p>
       </div>
	</div>

Answer 1

我想我已经解决了这个问题：https://jsfiddle.net/Microsmsm/yh1gykgs/4/

Refrence

＆＃13;

@font-face {
  font-family: lato-reg;
  src: url(fonts/lato/Lato-Regular.ttf);
}
@font-face {
  font-family: latobold;
  src: url(fonts/lato/Lato-Bold.ttf);
}
body,
html {
  margin: 0px;
  font-family: lato-reg;
  font-size: 16px;
  color: #3c3c3c;
}
img {
  width: 100%;
  height: 100%;
}
.header {
  padding-top: 10px;
}
.section {
  position: relative;
}
/*--------------------------------------First Section--*/

#first > img {
  position: relative;
}
.first-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
}
.first-wrapper img {
  position: relative;
  height: initial;
  width: initial;
}
.first-wrapper h2 {
  text-transform: uppercase;
  color: white;
  font-size: 54px;
  line-height: 1.2;
  margin-top: 95px;
  font-family: lato-reg;
  letter-spacing: .16em;
}
.first-wrapper p {
  line-height: 29.5px;
  text-transform: uppercase;
  color: white;
}
/*--------------------------------------Second Section--*/

#second {
  height: 635px;
  padding-top
}
.about-us-info {
  margin: 0 auto;
  width: 900px;
  height: 313px;
  /*     border: 2px solid #3c3c3c; */
  position: absolute;
  left: 50%;
  margin-left: -450px;
  top: 50%;
  margin-top: -160px;
}
span.span-header {
  text-align: center;
  display: block;
  /* margin-top: -22px; */
  position: relative;
  font-size: 34px;
  width: 100px;
  margin: 0 auto;
  margin-top: -21px;
  /* border: 1px solid black; */
  text-transform: uppercase;
  font-family: latobold;
}
.about-us-info p {
  text-align: center;
  /* line-height: 28px; */
  line-height: 1.65em;
}
.about-us-info p.first {
  margin-top: 35px;
}
/*--------------------------------------Third Section--*/

/* #services-info{
  height:250px;
  margin-top:-125px;
  border:2px solid white;
} */

#services-header {
  color: white;
}
#services-header:before,
#services-header:after {
  content: "";
  position: absolute;
  height: 5px;
  border-top: 2px solid white;
  top: 15px;
  width: 600px;
}
#services-header:before {
  right: 100%;
  margin-right: 15px;
}
#services-header:after {
  left: 100%;
  margin-left: 15px;
}
/*--------------------------------------Fourth Section--*/

#sample {
  margin-top: 0px;
}
#sample-header {
  background: #F3F5F6;
}

＆＃13;

<div class="section" id="third">
  <img src="http://www.wildlifetrusts.org/sites/default/files/images/Planting%20along%20realigned%20River%20Chelt%20Gloucs%20WT,%20EA%20and%20landowner2%20comp.jpg">
  <div class="about-us-info" id="services-info">
    <span class="span-header" id="services-header">Hello</span>
    <p class="first">Blah Blah
      <br>Blah BLah
    </p>
    <p>Blah Blah
      <br>Blah Blah
      <br>Blah Blah
      <br>Blah Blah
      <br>Blah Blah
    </p>
  </div>
</div>
<h2>
  What I want it to look like:
  </h2>
<div class="section" id="fourth">

  <div class="about-us-info" id="sample">
    <span class="span-header" id="sample-header">Hello</span>
    <p class="first">Blah Blah
      <br>Blah BLah
    </p>
    <p>Blah Blah
      <br>Blah Blah
      <br>Blah Blah
      <br>Blah Blah
      <br>Blah Blah
    </p>
  </div>
</div>

＆＃13;

Answer 2

在＃services-info id中，将border更改为0px，如下所示：

-exec[dir]

希望这有帮助。

Answer 3

只需取出div services-info

的范围即可

<span class="span-header" id="services-header">Hello</span>

然后将此css应用于它

span.span-header{
    background: transparent none repeat scroll 0 0;
    position: absolute;
    left: 33%;
    width: 450px;
    z-index: 2;
}

Answer 4

尝试：

<div class="span-header-border"></div>
<span class="span-header" id="services-header">Hello</span>
<div class="span-header-border"></div>

#services-info{
  height:250px;
  margin-top:-125px;
  border:2px solid white;
  border-top: none;
}
#services-header{
  background:transparent;
  color:white;
  float: left;
  width: 30%;
}
.span-header-border {
  height: 2px;
  width: 35%;
  background: white;
  float: left;
}

CSS保持div边界不显示跨度

4 个答案: