CSS скрывает элементы за логотипом

62
6

У меня проблема, когда мне нужно удалить/скрыть строку за моим прозрачным логотипом:

http://image.prntscr.com/image/80a9b209fa824c4482859000f0e4cbc7.png

Белая линия должна быть рядом с логотипом, но ее нельзя отображать позади. - И нет, я не буду добавлять черный фон.

Код:

<div style="position: absolute;margin-top: 74px;margin-left: 4%;width: 90%;height: 2px;background-color: #FFF;"></div>
<span style="font-size:81px;margin-top: 14px;padding: 0px 0px 0px 43%;position: fixed;">LOGO</span>
    Span станет прозрачным, это просто для тестирования.

спросил(а) 2021-01-19T17:05:04+03:00 2 месяца, 3 недели назад
1
Решение
107

Немногие вещи...

1. Ваши методы позиционирования в фрагменте кода, который вы включили, являются, откровенно говоря, ужасными. Я бы очистил это, а не использовал такие вещи, как padding: 43% для размещения ваших элементов - убедитесь, что у вас есть крепкий фундамент, прежде чем вы строите дом на нем! Я бы предложил проверить некоторые ресурсы в отношении позиционирования элементов с помощью CSS - учитывая, что вы предоставили только 2-строчный фрагмент, я не могу точно понять, какие правильные методы будут в вашем случае.

2.

И нет, я не буду добавлять черный фон.


Вы признаете простейший рабочий ответ, но вы не хотите его использовать...? Почему нет? Вы имеете в виду, что вы не хотите применять фон к изображению? Вы можете просто добавить его в диапазон, используя background-color: black;

3. Опять же, я не одобряю позицию элементов таким образом, однако используя ваш фрагмент (и применяя 43% на margin вместо padding), вы можете достичь этого: https://jsfiddle.net/dgat2q34/

Для дополнительного пространства между строкой и текстом вы должны использовать padding на span.

EDIT: Kaiwen Huang поднимает хороший момент - если вы не хотите использовать специально черный, как я включил в свой пример, вы можете изменить фон span на background-color: inherit; вместо.

ответил(а) 2021-01-19T17:05:04+03:00 2 месяца, 3 недели назад
44

Поскольку у вас есть прозрачный фон, я думаю, что единственный способ - дублировать строку div и разделить ее на два, один слева и один справа, я не знаю требуемых параметров, но у вас должно быть что-то вроде этого:

<div style="position: absolute;margin-top: 74px;margin-left: 4%;width: 30%;height: 2px;background-color: #FFF;"></div>
<span style="font-size:81px;margin-top: 14px;padding: 0px 0px 0px 43%;position: fixed;">LOGO</span>
<div style="position: absolute;margin-top: 74px;margin-left: 60%;width: 30%;height: 2px;background-color: #FFF;"></div>

Трудно сказать правильные поля, не зная, где они содержатся, вы должны опубликовать весь HTML, если вам нужна дополнительная помощь.

ответил(а) 2021-01-19T17:05:04+03:00 2 месяца, 3 недели назад
44

Вы можете проверить этот код:

<div id="#bg" style="border:1px solid ; position:relative; background-color:black; display: inline-block"><hr id="line" style="border: 1px solid #ffffff; position:absolute; width:98%; top:50%; z-index: 0;margin:0"><div id="#container" style="border:1px solid ;position:relative; background-color:none; display: inline-block"><div style="margin:0px 35px; font-family:Arial, Helvetica, sans-serif; color:#333333;  font-size: 80px">LOGO</div></div></div>

ответил(а) 2021-01-19T17:05:04+03:00 2 месяца, 3 недели назад
43

Я бы полностью позиционировал элементы в контейнере, а затем упорядочил их с помощью z-index, чтобы обеспечить их стекирование в правильном порядке. Я создал JSfiddle с быстрым примером того, как добиться этого:

https://jsfiddle.net/bL0dfkvq/

Ключевым здесь является z-индекс в тексте:

z-index:10;

Z-индекс на линии hr:

z-index:5;

ответил(а) 2021-01-19T17:05:04+03:00 2 месяца, 3 недели назад
44

Вы можете проверить строку "Направляющие линии".

Что-то вроде этого:

body {
background-color: black;
color: white;
}
.fancy {
line-height: 0.10;
text-align: center;
font-size: 81px;
margin-top: 20px;
}
.fancy span {
display: inline-block;
position: relative;
}
.fancy span:before,
.fancy span:after {
content: "";
position: absolute;
height: 5px;
border-top: 1px solid white;
top: 0;
width: 200px;
}
.fancy span:before {
right: 100%;
margin-right: 15px;
}
.fancy span:after {
left: 100%;
margin-left: 15px;
}
<div class="fancy"><span class="fancy">LOGO</span>
</div>

Источник

ответил(а) 2021-01-19T17:05:04+03:00 2 месяца, 3 недели назад
-4

Просто установите для своего логотипа более высокий z-index: чем строка.

Z-индекс в основном:

Свойство z-index указывает порядок стека элемента.

Элемент с большим порядком стека всегда находится перед элементом с более низким порядком стека.

ответил(а) 2021-01-19T17:05:04+03:00 2 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема