Question

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

我的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;
}

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

有什么想法吗？

Answer 1

使用以下CSS：

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

Answer 2

使用background的{{3}}颜色值：

＆＃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;

Answer 3

常见问题。不透明度应用于所有子元素。解决方法是使用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)";

Answer 4

使用以下内容

.text-rotator span.rotate {background：rgba（0,0,0,0.5）;}

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

4 个答案: