如何设置跨度背景的不透明度,而不是文本?

时间:2016-06-27 12:36:40

标签: html css html5

我已经获得了一些我需要自定义的代码

我的HTML

<div class="text-rotator add-top-half add-bottom-half align-left white-txt medium-txt uppercase highlight-bg">
    <div class="rotator-wrap" style="display: block;">
        <span class="rotate">Creating designs!</span>
    </div>
</div>

我的css是:

.text-rotator {
    line-height: 80px!important;
    display: inline!important;
}

.text-rotator span {
    background: #3399ff!important;
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.6;
}

但目前它正在设置文本的不透明度以及背景,我无法弄清楚如何保留文本并只更改背景。

有什么想法吗?

4 个答案:

答案 0 :(得分:3)

使用以下CSS:

.text-rotator span {
 background-color:rgba(255,0,0,0.3);/*background color and opacity together*/
 }

答案 1 :(得分:1)

使用background的{​​{3}}颜色值:

&#13;
&#13;
.text-rotator {
    line-height: 80px !important;
    display: inline !important;
}

.text-rotator span {
    background: rgba(51, 153, 255, 0.6) !important;
}
&#13;
<div class="text-rotator add-top-half add-bottom-half align-left white-txt medium-txt uppercase highlight-bg">
    <div class="rotator-wrap" style="display: block;">
        <span class="rotate">Creating designs!</span>
    </div>
</div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

常见问题。不透明度应用于所有子元素。解决方法是使用rgb颜色代码。并非所有浏览器都支持rgba,因此您也应该定义回退。

/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)";

答案 3 :(得分:0)

使用以下内容

.text-rotator span.rotate {background:rgba(0,0,0,0.5);}