Question

我创建了一个有背景图像的正方形，并用额外的div覆盖它，在该div的顶部我想要文本。现在我认为我可以使用//.html <div *ngFor="let element of elements"> <md-card>{{element}} <button (click)="delete()">Delete</button> </md-card> </div> //.ts public delete() { mydata.delete(this.element) //how to delete the actual element? }和z-index来解决问题，但它无效。目标是将文本放在黑色叠加层之上。

请记住，我不想缩小文本的不透明度。

以下是我的代码和演示，请参阅此处JSFIDDLE

＆＃13;

position: relative

＆＃13;

.image-holder {
  width: 275px;
  height: 274px;
  display: inline-block;
  position: relative;
  z-index: 13;
  background-color: blue;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
}

h2.offer-image-title {
  color: red;
  border: 0;
  text-align: center;
  font-size: 36px;
  display: inline-block;
  padding: 0;
  margin: 0;
  padding-top: 32%;
  position: relative;
  z-index: 15;
}

.offer-image {
  width: 100%;
  height: 100%;
  position: relative;
}

.offer-1 {
  background-image: url(http://www.wnd.com/files/2015/03/chuck_norris300x300-275x275.jpg);
}

.overlay-black {
  background-color: black;
  opacity: 0.5;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 14;
}

＆＃13;

Answer 1

您的h2需要绝对定位和上/下位置：

TestCaseSource

Answer 2

我创建了一个有一个背景图像的正方形，我用一个额外的覆盖，并在该div的顶部我想要文本。

一种解决方案是让您的h2坐在里面嵌套div：

＆＃13;

.image-holder{
	width:275px;
	height:274px;
	display:inline-block;	
	position:relative; 
	z-index:13;
	background-color:blue;
	margin-left:20px;
	margin-right:20px;
	margin-bottom:20px;
}
h2.offer-image-title{
    width: 100%;
	color:red;
	border:0;
	text-align:center;
	font-size:36px;
	display:inline-block;
	padding:0;
	margin:0;
	padding-top:32%;	
	position:relative;
	z-index:15;
}
.offer-image{
	width:100%;
	height:100%;
	position:relative;
}
.offer-1{	
	background-image: url(http://www.wnd.com/files/2015/03/chuck_norris300x300-275x275.jpg);
}
.overlay-black{
	background-color: rgba(0, 0, 0, 0.5);
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:14;
}

＆＃13;

<div class="image-holder">
  <div class="offer-image offer-1">							
    <div class="overlay-black">
      <h2 class="offer-image-title">Weight lifting</h2>
    </div>					
  </div>
</div>

＆＃13;

编辑：在看到您对其他答案的评论后，我从内部opacity删除了div规则，而是使用了rgba值background-color可以获得相同的结果，但不会影响h2的不透明度。此外，将width:100%添加到h2会使text-align: center正常工作。

Answer 3

您可以将linear-gradient() + rgba()与背景图片一起用于叠加层，并使用flexbox将文本居中。

.image-holder {
  width: 200px;
  height: 200px;
  background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(https://i.stack.imgur.com/rFpk9.jpg);
  background-size: 100%, cover;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

<div class="image-holder">
  <h2>Chuck Norris</h2>
</div>

叠加方框中的中心文字没有不透明度

3 个答案: