如何掩盖＆＃34; hr＆＃34;圆形div线

时间：2017-01-25 15:30:00

标签： html css twitter-bootstrap

我需要这样的东西：

enter image description here

我使用了bootstrap框架。这条线＆＃34; hr＆＃34;不应该在圆圈div后面看到（如图所示）。是否可以使用css masking ??

我的代码如下：

＆＃13;
＆＃13; 
.container.bg {
  background: url(https://image.shutterstock.com/z/stock-photo-silhouettes-of-colleagues-discussing-business-issue-in-dark-office-377738314.jpg);
      background-size: cover;
  }
.about-info {
	padding-top:70px;
	padding-bottom:90px;
	position:relative
}
.about-info hr {
	position:absolute;
	width: 100%;
    right: 15px;
    left: 15px;
    top: 40%;
    z-index: 1;
}
.about-info .text {
	width:100px;
	height:100px;
	background:rgba(153,153,153,0.5);
	border-radius:100%;
	text-align:center;
	line-height:14;
	margin:0 auto
}
.about-info .text span {
	display: inline-block;
    vertical-align: middle;
    padding-right: 10px;
    padding-left: 10px;
	font-family:helverticacb;
	color:#fff;
	font-size:20px
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container bg">
<div class="row about-info">
<hr>
<div class="col-sm-4 col-xs-4"><div class="text pull-left"><span>Honesty</span></div></div>
<div class="col-sm-4 col-xs-4 text-center"><div class="text"><span>Transparency</span></div></div>
<div class="col-sm-4 col-xs-4"><div class="text pull-right"><span>Integrity</span></div></div>
</div>
  </div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：3)

以下是使用flex-box

的解决方案

你可能想要调整一些（注意：在不同尺寸的视口上，柔性宽度和高度可能会有不同的缩放

.container.bg{
  font-size:5em;  
}
.flex-container {
  min-height:5em;
  background: url(https://image.shutterstock.com/z/stock-photo-silhouettes-of-colleagues-discussing-business-issue-in-dark-office-377738314.jpg);
  background-size: cover;
  display: flex;
  /*makes the container a flex-box*/
  flex-direction: row;
  align-items: center;
  /* centers the stuff V*/
}
.hr {
  flex-grow: 2;
  /* make the rules 2x the width as circles*/
  height: 2px;
  border: 1px solid #ccc;
}
.text {
  font-family: impact;
  font-size: .3em;
}
.about-info {
  padding-top: 70px;
  padding-bottom: 90px;
  /*position: relative*/
  width: 80px;
  height: 80px;
  background-color: rgba(255, 255, 255, .5);
  border-radius: 100%;
  text-align: center;
  flex-grow: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container bg">
  <div class="flex-container">
    <div class="about-info">
      <div class="text "><span>Honesty</span>
      </div>
    </div>
    <div class="hr"></div>
    <div class="about-info">
      <div class="text "><span>Transparency</span>
      </div>
    </div>
    <div class="hr"></div>
    <div class="about-info">
      <div class="text "><span>Integrity</span>
      </div>
    </div>
  </div>

</div>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

答案 1 :(得分：1)

（3编辑）

阻止z-index“工作”的不透明度。
注意：z-index正在完成它的工作，但如果顶层是透明的，你会在它下面看到它。 

.container.bg {
  background: url(https://image.shutterstock.com/z/stock-photo-silhouettes-of-colleagues-discussing-business-issue-in-dark-office-377738314.jpg);
      background-size: cover;
  }
.about-info {
	padding-top:70px;
	padding-bottom:90px;
	position:relative
}
.about-info hr {
	position:absolute;
	width: 100%;
    right: 15px;
    left: 15px;
    top: 40%;
    z-index: 0;
}
.about-info .text {
	width:100px;
	height:100px;
	background:rgba(153,153,153,1);
	border-radius:100%;
	text-align:center;
	line-height:14;
	margin:0 auto
}
.about-info .text span {
	display: inline-block;
    vertical-align: middle;
    padding-right: 10px;
    padding-left: 10px;
	font-family:helverticacb;
	color:#fff;
	font-size:20px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container bg">
<div class="row about-info">
<hr>
<div class="col-sm-4 col-xs-4"><div class="text pull-left"><span>Honesty</span></div></div>
<div class="col-sm-4 col-xs-4 text-center"><div class="text"><span>Transparency</span></div></div>
<div class="col-sm-4 col-xs-4"><div class="text pull-right"><span>Integrity</span></div></div>
</div>
  </div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

编辑＃2： 也许你可以使hr的不透明度相同？

.container.bg {
  background: url(https://image.shutterstock.com/z/stock-photo-silhouettes-of-colleagues-discussing-business-issue-in-dark-office-377738314.jpg);
      background-size: cover;
  }
.about-info {
	padding-top:70px;
	padding-bottom:90px;
	position:relative
}
.about-info hr {
	position:absolute;
	width: 100%;
    right: 15px;
    left: 15px;
    top: 40%;
    z-index: 0;
    background-color: rgba(153,153,153,0.1);
    color: rgba(153,153,153,0.1);
    height: 5px;
}
.about-info .text {
	width:100px;
	height:100px;
	background:rgba(153,153,153,0.9);
	border-radius:100%;
	text-align:center;
	line-height:14;
	margin:0 auto
}
.about-info .text span {
	display: inline-block;
    vertical-align: middle;
    padding-right: 10px;
    padding-left: 10px;
	font-family:helverticacb;
	color:#fff;
	font-size:20px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container bg">
<div class="row about-info">
<hr>
<div class="col-sm-4 col-xs-4"><div class="text pull-left"><span>Honesty</span></div></div>
<div class="col-sm-4 col-xs-4 text-center"><div class="text"><span>Transparency</span></div></div>
<div class="col-sm-4 col-xs-4"><div class="text pull-right"><span>Integrity</span></div></div>
</div>
  </div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

编辑＃3：使用2 <hr>代替1。

.container.bg {
  background: url(https://image.shutterstock.com/z/stock-photo-silhouettes-of-colleagues-discussing-business-issue-in-dark-office-377738314.jpg);
      background-size: cover;
  }
.about-info {
	padding-top:70px;
	padding-bottom:90px;
	position:relative
}
hr {
	position:absolute;
	width: auto;
    right: 5px;
    left: 20px;
    top: 30px;
    color: red;
    background-color: red;
    color: red;
    height: 2px;
    border: 0;

}
.text {
	width:100px;
	height:100px;
	background:rgba(153,153,153,0.9);
	border-radius:100%;
	text-align:center;
	line-height:14;
	margin:0 auto;
}
.text span {
	display: inline-block;
    vertical-align: middle;
    padding-right: 10px;
    padding-left: 10px;
	font-family:helverticacb;
	color:#fff;
	font-size:20px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container bg">
  <div class="row about-info">
    <div class="col-xs-2 col-xs-offset-1">
      <div class="text pull-left">
        <span>lorem</span>
      </div>
    </div>
    <div class="col-xs-2">
      <hr>
    </div>
    <div class="col-xs-2">
      <div class="text text-center">
        <span>lorem</span>
      </div>
    </div>
    <div class="col-xs-2">
      <hr>
    </div>
    <div class="col-xs-2">
       <div class="text pull-right">
         <span>lorem</span>
       </div>
     </div>
   </div>
</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

答案 2 :(得分：1)

您是否考虑在:after上使用.text？所以像：

.text:after {
    content: '';
    position: absolute;
    top: 50px;
    left: 115px;
    display: block;
    width: 210px;
    border: 1px solid #fff;
}

从那里调整宽度/高度等，让它看起来正确。

看看这里的小提琴：https://jsfiddle.net/mjwtL2ze/3/

相关问题
最新问题