Wie wird nur Hintergrundbild im reaktionsfähigen quadratischen Raster transparent gemacht?

Question

Mit web-tiki's responsive square grid lay-out's Ich habe einige ansprechende Quadrate mit Hintergrundbildern und Text auf sie gemacht wie folgt:

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;} 

Jetzt nur noch das machen ich versuche Hintergrund transparent, nicht der Text.

Bei Verwendung der opacity: 0.3 Eigenschaft auf der imgautumn1 CSS-Klasse wird das Bild transparent, aber auch der Text darin. Andere Techniken wie die von this SO-answer mit einem separaten div für den Hintergrund oder eine Technik mit dem :after Element von here für den Hintergrund plus Deckkraft machen die Positionierung des Hintergrunds falsch (dh Bild nicht zentriert) und ich finde es schwer zu implementieren. Eine andere Möglichkeit wäre, ein transparentes div-Quadrat über dem Bild zu platzieren, aber ich denke nicht, dass das mit der Eigenschaft background-image möglich ist.

Ich hoffe jemand hier kann mir mit etwas Hilfe zur Verfügung stellen, wie man den Hintergrund nur transparent und nicht den Text bildet.

JSFiddle: http://jsfiddle.net/L7m5psrm/

Answer 1

scheint gut zu funktionieren, wenn Sie die :after/:before Lösung verwenden (das Bild als Hintergrund einstellen)

Sie müssen nur sicherstellen, dass Sie die gleichen background Eigenschaften gelten.

.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; 
} 

Demo bei http://jsfiddle.net/L7m5psrm/2/