html里怎么设置网格背景,HTML – 如何使响应方形网格中的背景图像透明？

使用

web-tiki’s responsive square grid lay-out’s我已经制作了一些带有背景图像和文本的响应方块,如下所示：

HTML：

VISIBLE TEXT

CSS：

.square {

float: left;

position: relative;

margin: 0.25%;

width: 50%;

padding-bottom : 50%; /* = width for a 1:1 aspect ratio */

background-color: #1E1E1E;

overflow: hidden;

}

.content {

position: absolute;

height: 90%; /* = 100% - 2*5% padding */

width: 90%; /* = 100% - 2*5% padding */

padding: 5%;

}

.table {

display: table;

width: 100%;

height: 100%;

}

.table-cell {

display: table-cell;

vertical-align: middle;

}

.months {

font-size: 40px;

font-weight: 900;

}

.imgautumn1:before {

background-color: black;

}

/* For responsive images as background */

.bg:before {

background-position: center center;

background-repeat: no-repeat;

background-size: cover; /* you change this to "contain" if you don't want the images to be cropped */

content:'';

position:absolute;

top:0;left:0;

right:0;bottom:0;

}

.bg{color: #fff;}

/*CHANGE OPACITY ON HOVER*/

.bg:hover:before{opacity:0.2;}

现在我试图只使背景透明,而不是文本.

在imgautumn1 CSS-class上使用opacity：0.3属性时,图像变得透明,但也包含文本.其他技术,如this SO-answer中的一个,使用单独的div作为背景,或者使用：here之后的元素作为背景加上不透明度的技术使得背景的定位出错(即图像不居中),我发现很难实现.另一种可能性是在图像顶部放置一个透明的div方形,但我不认为background-image属性是可行的.

我希望这里的某位人员可以为我提供一些帮助,让他们了解如何使背景透明而不是文本.