Половина окно непрозрачности (с текстом и фоном)

Question

это можно сделать ▼ с помощью CSS или может быть что-то еще

Answer 1

Да, используя градиент на родительском DIV:

.my-div { 
    width: 50%; 
    color: white; 
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4c4c4c+0,595959+12,666666+25,474747+39,2c2c2c+50,000000+51,111111+60,2b2b2b+76,1c1c1c+91,131313+100;Black+Gloss+%231 */ 
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#45484d+0,000000+100;Black+3D+%231 */ 
    background: #45484d; /* Old browsers */ 
    background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* FF3.6-15 */ 
    background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */ 
    background: linear-gradient(to bottom, #45484d 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#45484d', endColorstr='#000000',GradientType=0); /* IE6-9 */ 

} 

.my-div p { 
    color:black; 
} 

И HTML:

<div class="my-div"> 
    Some text 
    <p> 
    Other text 
    </p> 
</div> 

Все это вместе:

/* Styles go here */ 
 

 
.my-div { 
 
    width: 50%; 
 
    color: white; 
 
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4c4c4c+0,595959+12,666666+25,474747+39,2c2c2c+50,000000+51,111111+60,2b2b2b+76,1c1c1c+91,131313+100;Black+Gloss+%231 */ 
 
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#45484d+0,000000+100;Black+3D+%231 */ 
 
    background: #45484d; /* Old browsers */ 
 
    background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* FF3.6-15 */ 
 
    background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */ 
 
    background: linear-gradient(to bottom, #45484d 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#45484d', endColorstr='#000000',GradientType=0); /* IE6-9 */ 
 

 
} 
 

 
.my-div p { 
 
    color:black; 
 
}

<div class="my-div"> 
 
     Some text 
 
     <p> 
 
     Other text 
 
     </p> 
 
    </div>

Вот plunkr.

Answer 2

Редактировать

Это похоже на работу, но я не уверен, о совместимости х-браузера: https://jsfiddle.net/owaduvy8/1/

Конец редактирования

Yep, или наложение с градиентом :

https://jsfiddle.net/6uox1an7/1/

.text-container { 
    position: relative; 
    width: 200px; 
    height: 130px; 
    background-color: black; 
} 

p { 
    color: white; 
}