Категория звезд не отображается на белом фоне

Поэтому я использовал код с сайта 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; 

       }

[EDIT} Я сделал jsfiddle here. В окне вывода, если вы наведете ниже «В настоящее время с рейтингом 3 звезды», вы можете видеть звезды, но Initally они не видны

источник

2014-01-15 Jignesh

вы можете сделать скрипку? также включите ваш html. – gaurav5430

отредактировал вопрос для скрипки link – Jignesh

Что вам нужно? вам нужно показать звезды от начала? –

Просто обновите код 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

источник

2014-01-15 19:31:03

эй вы можете объяснить, что именно вы изменили и почему? – Jignesh

Использования opacity:.999 или background:rgba(255,255,255,0.999) на .container

Это происходит потому, что непрозрачность, кроме 1 создает новый stacking context, следовательно, устанавливает изображение звезды в отношении к контейнеру

формируется контекст штабелирования, в любом месте в документе, с помощью какого-либо элемента, который является либо

корневой элемент (HTML),

позиционируется (абсолютно или относительно) со значением Z-индекс, кроме

«авто», элементов со значением непрозрачности меньше 1. (См спецификацию

для непрозрачности), на мобильный WebKit и Chrome 22+,

положение: фиксированное всегда создает новый контекст стэк, даже когда

г-индекс «авто»

Demo

источник

2014-01-15 19:08:30

Категория звезд не отображается на белом фоне

ответ

Смежные вопросы