CSS - 透明度上的textarea：文本，但並不接壤

我有一個textarea有邊框屬性：CSS - 透明度上的textarea：文本，但並不接壤

#my_textarea{ 
    border-color: #EEEEEE; 
    border-style: solid; 
    border-width: 2px; 
    width: 95%; 
    min-height: 550px; 
    padding: 30px; 
    margin-top: 28px; 
    /* Text style */ 
    font-family: Times-Italic; 
    font-size: 19px; 
    color: #717171; 
    line-height: 27px; 
    text-align: left; 
    resize: none; 
    }

我想這textarea中的文本有透明度。但是，當我設置opacity: 0.5;它也影響邊界。

如何設置opacity只在textarea內的文本而不是文本+邊框？

來源

2015-07-21 Stéphane J.

只需使用一個RGBA文本顏色

color: rgba(113,113,113,0.5);

body { 
 
    background: lightgreen; 
 
} 
 
#my_textarea { 
 
    border-color: #EEEEEE; 
 
    border-style: solid; 
 
    border-width: 2px; 
 
    width: 95%; 
 
    min-height: 100px; 
 
    padding: 30px; 
 
    margin-top: 28px; 
 
    /* Text style */ 
 
    font-family: Times-Italic; 
 
    font-size: 19px; 
 
    color: rgba(113, 113, 113, 0.5); 
 
    line-height: 27px; 
 
    text-align: left; 
 
    resize: none; 
 
}

<div id="my_textarea"> 
 
    <p>Lorem ipsum dolor sit amet.</p> 
 

 
</div>

來源

2015-07-21 13:55:46

展開式什麼@Paulie_D說你應該設置不透明度RGBA顏色文本：

#my_textarea{ 
    rgba(113, 113, 113, 0.5); //instead of #717171 
}

也有一個漂亮的六角形> RGBA顏色converter

來源

2015-07-21 13:55:45 Keammoort

對您的color使用RGBA值應解決您的問題。

下面是一個例子。

body { 
 
    background: red; 
 
} 
 
#my_textarea { 
 
    border-color: #EEEEEE; 
 
    border-style: solid; 
 
    border-width: 2px; 
 
    width: 95%; 
 
    min-height: 550px; 
 
    padding: 30px; 
 
    margin-top: 28px; 
 
    font-family: Times-Italic; 
 
    font-size: 19px; 
 
    line-height: 27px; 
 
    text-align: left; 
 
    resize: none; 
 
    color: rgba(113,113,113, 0.5); 
 
    background: transparent; 
 
}

<textarea id="my_textarea">Lorum Ipsum</textarea>

Generator

來源

2015-07-21 13:56:27 Stewartside

的備選解決方案，以補充其他的答案，用於IE8（如果需要的話 - 爲RGBA不受它支持）。將具有圍繞一個包裝元件textarea並使用opacity代替RGBA顏色：

body { 
 
    background: red; 
 
} 
 
.foo { 
 
    border-color: #EEEEEE; 
 
    border-style: solid; 
 
    border-width: 2px; 
 
} 
 
#my_textarea { 
 
    width: 95%; 
 
    min-height: 550px; 
 
    padding: 30px; 
 
    margin-top: 28px; 
 
    font-family: Times-Italic; 
 
    font-size: 19px; 
 
    line-height: 27px; 
 
    text-align: left; 
 
    resize: none; 
 
    background: transparent; 
 
    color: #717171; 
 
    opacity: 0.5; 
 
}

<div class="foo"> 
 
    <textarea id="my_textarea">Lorum Ipsum</textarea> 
 
</div>

來源

2015-07-21 14:48:14 Luca

CSS - 透明度上的textarea：文本，但並不接壤

回答

相關問題