Прозрачный ящик не принимает цвет в css

Question

У меня есть изображение за текстовым полем в html css. Я хочу, чтобы это текстовое поле было прозрачным, но имело некоторый цвет. Все в порядке, но транскон не кажется цветным, кроме черного и белого. Это мой HTML-код:

.background { 
 
    background: url(../images/background.png) repeat; 
 
    border: 2px solid black; 
 
    z-index: -1; 
 
    width: 100%; 
 
    height: 800px; 
 
    position: relative; 
 
    opacity: 0.4; 
 
    -webkit-filter: sepia(100%); 
 
    /* Chrome, Safari, Opera */ 
 
    filter: sepia(100%); 
 
} 
 
.transbox { 
 
    margin: 30px; 
 
    width: 600px; 
 
    background-color: red; 
 
    border: 1px solid black; 
 
    opacity: 0.6; 
 
    filter: alpha(opacity=60); 
 
    /* For IE8 and earlier */ 
 
} 
 
.transbox p { 
 
    margin: 20px; 
 
    font-weight: bold; 
 
    color: #000000; 
 
}

<div class="background"> 
 

 
    <div class="transbox"> 
 
    <p>IMPORTANTE COMUNICAZIONE</p> 
 
    <p>Nei mesi di Luglio ed Agosto operatività ridotta per avvicendamento ferie. Vi possono essere ritardi nelle spedizioni. Saremo chiusi dal 10 al 19 Agosto. Potete inviare i vostri ordini che saranno evasi dal 23 Agosto. Non dimenticate di indicare le 
 
     date in cui sarete assenti per ferie od altro. Grazie.</p> 
 
    </div> 
 
</div>

Результат таков: Так мешающих видеть фон окрашен в красный цвет. Я что-то изменю в своем коде, или трансконсы не могут использовать другие цвета, черные, белые и серые. Благодаря!

Answer 1

, потому что у вас есть filter:sepia(100%) на .background которая parent из .transbox, то transbox наследует filter и именно поэтому ваш цвет черный или белый, а не другие цвета.

одним решением было бы использовать :before псевдо-элемент на .background и добавьте background-img и filter:sepia(100%) к этому псевдо-элемента, а не на .background

см ниже фрагмент кода. дайте мне знать, если это помогает

.background { 
 
    
 
    border: 2px solid black; 
 
    z-index: -1; 
 
    width: 100%; 
 
    height: 800px; 
 
    position: relative; 
 

 
} 
 
.transbox { 
 
    margin: 30px; 
 
    width: 60%; 
 
    background-color: red; 
 
    border: 1px solid black; 
 
    opacity: 0.6; 
 
    filter: alpha(opacity=60); 
 
    /* For IE8 and earlier */ 
 
} 
 
.transbox p { 
 
    margin: 20px; 
 
    font-weight: bold; 
 
    color: #000000; 
 
} 
 
.background:before{ 
 
    position:absolute; 
 
    content:""; 
 
    width:100%; 
 
    height:100%; 
 
    background: url(http://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico) repeat; 
 
    opacity: 0.4; 
 
    -webkit-filter: sepia(100%); 
 
    /* Chrome, Safari, Opera */ 
 
    filter: sepia(100%); 
 
}

<div class="background"> 
 

 
    <div class="transbox"> 
 
    <p>IMPORTANTE COMUNICAZIONE</p> 
 
    <p>Nei mesi di Luglio ed Agosto operatività ridotta per avvicendamento ferie. Vi possono essere ritardi nelle spedizioni. Saremo chiusi dal 10 al 19 Agosto. Potete inviare i vostri ordini che saranno evasi dal 23 Agosto. Non dimenticate di indicare le 
 
     date in cui sarete assenti per ferie od altro. Grazie.</p> 
 
    </div> 
 
    </div>

Answer 2

К сожалению, только обертка. Проверьте это ...

.wrapper { 
 
    position: relative; 
 
    width: 92vw; 
 
    height: 6em; 
 
    margin: 10px 4vw; 
 
    border: 1px solid black; 
 
    background-image: url(http://beerhold.it/400/300); 
 
    background-size: cover; 
 
} 
 
.overlay { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: red; 
 
    opacity: 0.3; 
 
    filter: alpha(opacity=30); 
 
    /* For IE8 and earlier */ 
 
} 
 
.transbox { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    color: black; 
 
} 
 
.transbox p { 
 
    margin: 20px; 
 
    font-weight: bold; 
 
    color: #000000; 
 
}

<div class="wrapper"> 
 
    <div class="transbox"> 
 
    <p>IMPORTANTE COMUNICAZIONE</p> 
 
    <p>Grazie.</p> 
 
    </div> 
 
    <div class="overlay"></div> 
 
</div>