Jak zrobić przezroczysty obraz tła tylko w elastycznej siatce kwadratowej?

Question

Korzystanie web-tiki's responsive square grid lay-out's Zrobiłem kilka reagujących kwadraty z obrazów tła i tekstu na nim, co następuje:

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

Teraz usiłuję zrobić tylko tło przezroczyste, a nie tekst.

Podczas korzystania z właściwości opacity: 0.3 w klasie CSS imgautumn1 obraz staje się przezroczysty, ale także tekst w nim. Inne techniki, takie jak ta z this SO-answer z użyciem osobnego elementu div dla tła lub technika z użyciem elementu z here dla tła plus krycie sprawiają, że pozycjonowanie tła idzie źle (tj. Obraz nie jest wyśrodkowany) i znajduję je trudne do wdrożenia. Inną możliwością może być umieszczenie przezroczystego kwadratu div na obrazie, ale nie sądzę, że jest to możliwe w przypadku właściwości background-image.

Mam nadzieję, że ktoś tutaj może udzielić mi pomocy, jak tylko uczynić tło przezroczystym, a nie tekstem.

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

Answer 1

wydaje się działać prawidłowo w przypadku korzystania z rozwiązania :after/:before (ustawienia obrazu jako tła)

Musisz tylko upewnić się, że zastosowanie tych samych background właściwości.

.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 na http://jsfiddle.net/L7m5psrm/2/