不透明度仅适用于不在背景上的水印

时间:2014-03-06 13:32:24

标签: css css3

我想减轻文字的水印而不是背景。当我使用不透明度时,整个输入都会变亮。

这是我的小提琴http://jsfiddle.net/Ns8xe/

HTML

<select id="selMemberType" size="0" class="empty selectPlaceholder" tabindex="3">
            <option value="0" selected="" disabled="">Career Level</option>
            <option value="1">Student (High School)</option>
            <option value="2">Student</option>
            <option value="3">Entry Level</option>
            <option value="4">Experienced</option>
            <option value="5">Manager</option>
            <option value="6">Executive</option>
            <option value="7">Senior Executive</option>
            <option value="8">Celebrity</option>
        </select>

CSS

#selMemberType {
height: 32px!important;
border-top: 1px solid #666;
border-right: 1px solid #666;
border-bottom: 1px solid #c2c2c2;
border-left: 1px solid #666;
border-radius: 4px;
background-color: rgba(30,31,32,.58);
-webkit-box-shadow: inset 1px 1px 1px #555;
box-shadow: inset 1px 1px 1px #000;
font: normal 18px futuraltbook!important;
clear: both;
margin: 0 0 10px 0;
padding: 0;
width: 546px;

}

任何帮助将不胜感激..

1 个答案:

答案 0 :(得分:3)

使用rgba()设置Alpha不透明度值。它只会改变字体颜色的不透明度(也适用于背景颜色)。请注意,并非所有浏览器都支持此功能,因此您需要为不支持它的用户设置回退。

color: rgb( 0,0,0); /* fallback for not-rgba-supporting-browsers */
color: rgba( 0,0,0, 0.5);

检查updated Fiddle