#css #google-chrome #hover #overlay #opacity
#css #google-chrome #наведите курсор #наложение #непрозрачность
Вопрос:
пожалуйста, взгляните на ссылку ниже (хотя сделайте окно результатов немного шире) и скажите мне, почему все еще остаются белые линии сверху и по бокам полей, когда наложение при наведении полностью загружено? Когда я помещаю фоновое изображение для этого divs, проблема по-прежнему возникает (неважно, SVG это файл или PNG).
.link-picture-small {
position: relative;
display: block;
margin: auto;
width: 100%;
height: 17.5em;
background: #FFFFFF;§
background-size: 100%;
border-radius: 0.625em;
}
.overlay {
position: absolute;
display: table;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
width: 100%;
height: 100%;
background: #212121;
border-radius: 0.625em;
opacity: 0;
-webkit-transition: all 1.15s ease-out;
-moz-transition: all 1.15s ease-out;
-moz-transition: all 1.15s ease-out;
transition: all 1.15s ease-out;
}
.overlay p {
display: table-cell;
vertical-align: middle;
}
.link-picture-small:hover .overlay {
opacity: 0.99;
}
У меня возникла эта проблема с использованием Chrome (последняя версия). Эта проблема отсутствует в Firefox и (что очень удивительно!) в Safari.
Существуют ли какие-либо хитрые методы, как заставить его работать должным образом в браузере Google?
Комментарии:
1. Сейчас это лучше, но, если вы сделаете окно результатов шире, вы все равно увидите белые полосы по бокам. Опять же, только Chrome. Я хочу, чтобы оно хорошо работало на более широком экране — вот почему я продолжаю эту тему.
Ответ №1:
Я думаю, это из-за display:table
.
Я предложу подход, но я не уверен, что это лучший.
Удалить
display: table;
Добавить
padding-top: 50%;
box-sizing: border-box;
webkit-box-sizing: border-box;
Скрипка
Ответ №2:
Поскольку вы позиционируете .overlay
абсолютно, вам не нужно устанавливать для него display
значение table
.
Вот пример:http://jsfiddle.net/hatK5/3 /.
.overlay {
position: absolute;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
width: 100%;
height: 100%;
background: #212121;
border-radius: 0.625em;
opacity: 0;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
Комментарии:
1. Сейчас это лучше, но, если вы сделаете окно результатов шире, вы все равно увидите белые полосы по бокам. Опять же, только Chrome. Я хочу, чтобы оно хорошо работало на более широком экране — вот почему я продолжаю эту тему.
2. Я только что протестировал код вне jsfiddle на широком экране в Chrome 35, и он выглядит хорошо. Попробуйте указать координаты
.overlay
top: 0
иleft: 0
. Кроме того, когда я применил мини-сброс:* {margin: 0; padding: 0; }
даже сdisplay: table
белые контуры исчезли. Попробуйте это.3. Это не помогает. Решением было поместить
-webkit-backface-visibility: hidden;
на:hover
элемент. Однако я понятия не имею, почему это помогает, поэтому, если кто-нибудь будет так любезен объяснить, я был бы признателен.4. О, я забыл упомянуть, что я понял, в чем причина проблемы. В основном странные белые линии появлялись, когда
opacity
значение было меньше1
.