Question

所以我使用this网站上的代码在我的网页上显示星级评分组件。之前它工作正常，但是当我将网页背景更改为黑色（图像），主容器背景变为白色，星形图像消失后，我尝试修复它并发现将容器的不透明度设置为小于1的任何值，显示星级图像，但在完全不透明度时，图像会消失。有没有办法修复下面的星级图像css，以便在不使用不透明度的情况下正确显示。可能与z指数有关。

    /* 'star-rating' component */
    .starRate {position:relative; margin:20px; overflow:hidden; zoom:1;}
    .starRate ul {width:160px; margin:0; padding:0;}
    .starRate li {display:inline; list-style:none;}
    .starRate a, .starRate b {background:url(img/star_rate.gif) left top repeat-x;}
    .starRate a {float:right; margin:0 80px 0 -144px; width:80px; height:16px; background-position:left 16px; color:#000; text-decoration:none;}
    .starRate a:hover {background-position:left -32px;}
    .starRate b {position:absolute; z-index:-1; width:80px; height:16px; background-position:left -16px;}
    .starRate div b {left:0px; bottom:0px; background-position:left top;}
    .starRate a span {position:absolute; left:-300px;}
    .starRate a:hover span {left:90px; width:100%;}

这是我的网页css

    body{
        background: url('images/bg.jpg');       
    }
    .container {                
                    border: 1px solid #CECECE;
                    background-color: #fff;
                    border-radius: 6px;
                    -moz-box-shadow: 0 0 10px 5px #ccc;
                    -webkit-box-shadow: 0 0 10px 5px #ccc;
                    box-shadow: 0 0 10px 5px #ccc;
                    margin: 10px auto;
                    padding: 0 10px;
                    min-height: 660px;

                }

[编辑}我制作了一个jsfiddle here。在输出窗口中，如果您将鼠标悬停在“当前评级为3星”之下，您可以看到星星，但最初它们不可见

Answer 1

在opacity:.999

上使用background:rgba(255,255,255,0.999)或.container

这是因为1以外的不透明度会创建新的stacking context，因此会根据容器设置星形图像

通过
中的任何元素，在文档中的任何位置形成堆叠上下文

根元素（HTML），

使用除
之外的z-index值定位（绝对或相对）
“auto”，不透明度值小于1的元素。（参见

不透明度规范），移动版WebKit和Chrome 22 +，

position：fixed总是会创建一个新的堆叠上下文，即使
也是如此
z-index是“auto”

Demo

Answer 2

只需使用以下代码更新您的css代码。如果工作正常，请查看以下链接。

 /* 'star-rating' component */
.starRate {position:relative; margin:20px; overflow:hidden; zoom:1;z-index:100;}
.starRate ul {width:160px; margin:0; padding:0;}
.starRate li {display:inline; list-style:none;}
.starRate a, .starRate b {background:url("http://www.dillerdesign.com/css/cookbook/img/star_rate.gif") left top repeat-x;}
.starRate a {float:right; margin:0 80px 0 -144px; width:80px; height:16px; background-position:left 16px; color:#000; text-decoration:none;z-index:100;}
.starRate a:hover {background-position:left -32px;}
.starRate b {position:absolute; z-index:-1; width:80px; height:16px; background-position:left -16px;}
.starRate div b {left:0px; bottom:0px; background-position:left top;}
.starRate a span {position:absolute; left:-300px;}
.starRate a:hover span {left:90px; width:100%;}

Check Here

星级在白色背景中不可见

2 个答案: