Question

这是我的JS小提琴：https://jsfiddle.net/aeh8hxys/

有人可以告诉我为什么（以及如何停止！）模式与我的按钮重叠？谢谢！

CSS：

.pattern
{ 
   width:500px;
   height:300px;
   background-color: #FF0000;
}

 .pattern:after {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MkRGNDcyQ0Y4ODQ4MTFFNEFFRjVERDUwMjZBRDgzNUYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MkRGNDcyRDA4ODQ4MTFFNEFFRjVERDUwMjZBRDgzNUYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyREY0NzJDRDg4NDgxMUU0QUVGNURENTAyNkFEODM1RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyREY0NzJDRTg4NDgxMUU0QUVGNURENTAyNkFEODM1RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtWxVHsAAABESURBVHjahI9BDgAgCMO0///zjBcDZk6OpIF2Shpm9nLWBQFSAuulBpPeVZgANZgPdGCcuAvEibtAnLgL5FV5uy8BBgBvsBUQrZ/GBQAAAABJRU5ErkJggg==") repeat;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "\0020";
    opacity: .5;
    z-index: 0;
}

和HTML：

<div class="pattern">
    <button class="btn btn-info">This is a button</button>
</div>

Answer 1

因为模式是“定位”（position以外的static），并且有z-index，这意味着它会显示在按钮上方，该按钮位于非定位位置并且没有z-index。

要使按钮显示在图案上方，请为其添加除position以外的static和高于z-index的图案。

https://jsfiddle.net/aeh8hxys/1/

.pattern
{ 
   width:500px;
   height:300px;
   background-color: #FF0000;
}

 .pattern:after {
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MkRGNDcyQ0Y4ODQ4MTFFNEFFRjVERDUwMjZBRDgzNUYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MkRGNDcyRDA4ODQ4MTFFNEFFRjVERDUwMjZBRDgzNUYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyREY0NzJDRDg4NDgxMUU0QUVGNURENTAyNkFEODM1RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyREY0NzJDRTg4NDgxMUU0QUVGNURENTAyNkFEODM1RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtWxVHsAAABESURBVHjahI9BDgAgCMO0///zjBcDZk6OpIF2Shpm9nLWBQFSAuulBpPeVZgANZgPdGCcuAvEibtAnLgL5FV5uy8BBgBvsBUQrZ/GBQAAAABJRU5ErkJggg==") repeat;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	content: "\0020";
	opacity: .5;
	z-index: 0;
}
button {
  position: relative;
  z-index: 1;
}

<div class="pattern">
<button class="btn btn-info">This is a button</button>
</div>

CSS - 为什么模式重叠按钮？

1 个答案: