ハーフボックスの不透明度

Question

は、これを行うことが可能である親のdivの勾配を用いて、多分何か他のもの

Answer 1

はいを​​CSSを使用して、▼：

.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

編集

これが動作しているようですが、私は、x-ブラウザの互換性についてはよく分からない：編集

うん、または勾配を有するオーバーレイのhttps://jsfiddle.net/owaduvy8/1/

終了：

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

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

p { 
    color: white; 
}