使用
web-tiki’s responsive square grid lay-out’s我已经制作了一些带有背景图像和文本的响应方块,如下所示：
HTML：
<div class="square bg imgautumn1">
<div class="content">
<div class="table">
<div class="table-cell months">
VISIBLE TEXT
</div>
</div>
</div>
</div>
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属性是可行的.
我希望这里的某位人员可以为我提供一些帮助,让他们了解如何使背景透明而不是文本.
JSFiddle：http://jsfiddle.net/L7m5psrm/
解决方法
如果使用：after /：before solution(将图像设置为背景),似乎工作正常
您只需要确保应用相同的背景属性.
.imgautumn1:before {
background-image: url('https://raw.githubusercontent.com/erooijak/zaaikalender/master/Zk/Content/Images/Autumn/1.jpg');
}
/* 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;
}
