叠加边框有效但背景颜色不

时间：2016-05-15 19:26:19

标签： html css twitter-bootstrap css3 twitter-bootstrap-3

我正在处理我的图库项目的叠加层，当我检查目标是否正确时，红色边框是否正常工作，但当我想更进一步并添加背景色时，它不会z-index设置。 我在这做错了什么？ Clearfix没有区别。 

.gallery {
  margin-top:50px;
}

.gallery-item {
  padding:0px;
  border:1px solid white;
  z-index:101;
  position:relative;
}

.gallery-item img {
  position:relative;
  width:100%;
  z-index:101;
}

.gallery-overlay {
  border:1px solid red;
  background-color:rgba(255,255,255,.1);
  position:relative;
  width:100%;
  z-index:102;
}

.gallery-caption {
  height:50px;
  display:none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="gallery clearfix col-sm-10 col-sm-offset-1">
    <div class="row">
        <div class="col-sm-4 gallery-item">
            <div class="gallery-overlay">
                <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500">
            </div>
            <p class="gallery-caption text-center">Item caption</p>
        </div>
        <div class="col-sm-4 gallery-item">
            <div class="gallery-overlay">
                <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500">
            </div>
            <p class="gallery-caption text-center">Item caption</p>
        </div>
        <div class="col-sm-4 gallery-item">
            <div class="gallery-overlay">
                <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500">
            </div>
            <p class="gallery-caption text-center">Item caption</p>
        </div>
    </div>
    <!-- new row starts -->
    <div class="row">
        <div class="col-sm-4 gallery-item">
            <div class="gallery-overlay">
                <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500">
            </div>
            <p class="gallery-caption text-center">Item caption</p>
        </div>
        <div class="col-sm-4 gallery-item">
            <div class="gallery-overlay">
                <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500">
            </div>
            <p class="gallery-caption text-center">Item caption</p>
        </div>
        <div class="col-sm-4 gallery-item">
            <div class="gallery-overlay">
                <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500">
            </div>
            <p class="gallery-caption text-center">Item caption</p>
        </div>
    </div>
</div>

3 个答案:

答案 0 :(得分：1)

你的问题是背景颜色确实有效，但它的内容被覆盖，在这种情况下是图像。

如果效果是在图像上创建半透明的颜色，请删除z-indexes，并仅向图像本身添加z-index: -1。这样它就会把它自己隐藏在父母的背景颜色之后。

看看代码。我已经取出所有z索引并修改/添加以下内容（并将背景颜色从白色更改为蓝绿色，并将其不透明度从0.1更改为0.5以使其更加明显）：

.gallery-overlay {
  border:1px solid red;
  background-color:rgba(0,255,255,.5);
  position:relative;
  width:100%;
}
.gallery-overlay img {
  z-index: -1;
}

＆＃13;
＆＃13; 
.gallery {
	margin-top:50px;
}

.gallery-item {
	padding:0px;
	border:1px solid white;
	z-index:101;
	position:relative;
}

.gallery-item img {
	position:relative;
	width:100%;
}

.gallery-overlay {
	border:1px solid red;
	background-color:rgba(0,255,255,.5);
	position:relative;
	width:100%;
}

.gallery-overlay img {
  z-index: -1;
}

.gallery-caption {
	height:50px;
	display:none;
}
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="gallery clearfix col-sm-10 col-sm-offset-1">
				<div class="row">
					<div class="col-sm-4 gallery-item">
						<div class="gallery-overlay">
							<img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500">
						</div>
						<p class="gallery-caption text-center">Item caption</p>
					</div>
					<div class="col-sm-4 gallery-item">
						<div class="gallery-overlay">
							<img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500">
						</div>
						<p class="gallery-caption text-center">Item caption</p>
					</div>
					<div class="col-sm-4 gallery-item">
						<div class="gallery-overlay">
							<img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500">
						</div>
						<p class="gallery-caption text-center">Item caption</p>
					</div>
				</div>
				<!-- new row starts -->
				<div class="row">
					<div class="col-sm-4 gallery-item">
						<div class="gallery-overlay">
							<img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500">
						</div>
						<p class="gallery-caption text-center">Item caption</p>
					</div>
					<div class="col-sm-4 gallery-item">
						<div class="gallery-overlay">
							<img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500">
						</div>
						<p class="gallery-caption text-center">Item caption</p>
					</div>
					<div class="col-sm-4 gallery-item">
						<div class="gallery-overlay">
							<img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500">
						</div>
						<p class="gallery-caption text-center">Item caption</p>
					</div>
				</div>
			</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

为什么不使用opacity来改变background-color gallery-overlay到rgba(255,255,255,1)并将opacity: 0.1添加到gallery-item img这将产生完全相同的视觉效果。

检查下面的代码段：

＆＃13;
＆＃13; 
.gallery {
	margin-top:50px;
}

.gallery-item {
	padding:0px;
	border:1px solid white;
	z-index:101;
	position:relative;
}

.gallery-item img {
    position:relative;
    width:100%;
    z-index:101;
    opacity: 0.1;
}

.gallery-overlay {
	border:1px solid red;
	background-color:rgba(255,255,255,1);
	position:relative;
	width:100%;
	z-index:102;
}

.gallery-caption {
	height:50px;
	display:none;
}
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="gallery clearfix col-sm-10 col-sm-offset-1">
				<div class="row">
					<div class="col-sm-4 gallery-item">
						<div class="gallery-overlay">
							<img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500">
						</div>
						<p class="gallery-caption text-center">Item caption</p>
					</div>
					<div class="col-sm-4 gallery-item">
						<div class="gallery-overlay">
							<img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500">
						</div>
						<p class="gallery-caption text-center">Item caption</p>
					</div>
					<div class="col-sm-4 gallery-item">
						<div class="gallery-overlay">
							<img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500">
						</div>
						<p class="gallery-caption text-center">Item caption</p>
					</div>
				</div>
				<!-- new row starts -->
				<div class="row">
					<div class="col-sm-4 gallery-item">
						<div class="gallery-overlay">
							<img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500">
						</div>
						<p class="gallery-caption text-center">Item caption</p>
					</div>
					<div class="col-sm-4 gallery-item">
						<div class="gallery-overlay">
							<img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500">
						</div>
						<p class="gallery-caption text-center">Item caption</p>
					</div>
					<div class="col-sm-4 gallery-item">
						<div class="gallery-overlay">
							<img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500">
						</div>
						<p class="gallery-caption text-center">Item caption</p>
					</div>
				</div>
			</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

您是否尝试仅使用背景替换background-color？

像这样：

.gallery-overlay {
    border:1px solid red;
    background:rgba(255,255,255,.1);
    position:relative;
    width:100%;
    z-index:102;
}
相关问题
最新问题