1
Я знаю, что есть статья о собственных отношениях псевдоэлементов.Возможно ли сделать фон div перед его :: after/:: перед псевдоэлементом?
(от CSS tricks)
я встретил проблему об этом, где я хотел бы сделать «белый цвет фона сек перед .nav-box::after» .nav-box черного s, как плавающие список меню. Хотя я видел this from previous question, кажется, что невозможно сделать вышеупомянутую работу. Хотелось бы проверить, так ли.
Код также находится на JSBIN.
body {
position: relative;
z-index: 1;
}
.nav-box {
position: relative;
z-index: 50; /* no effects */
top: 0;
right: 0;
width: 60vw;
height: 100vh;
border: 1px solid red;
background-color: white;
}
.nav-box::after {
position: absolute;
z-index: -1;
content:"";
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: black;
}
.nav-box::before {
/* this will be a menu button */
position: absolute;
z-index: 10;
right: 0;
content: "O";
color: orange;
font-size: 40px;
}<body>
<nav class="nav-box">
<ul class="menu-box">
<li><a href="">About</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</body>
Человек, он работает! Благодаря! И мне интересно, можете ли вы дать мне ссылку на красный. :)? – chenghuayang
На самом деле, если вы читаете первые разделы @ [Nicolas Gallagher - Несколько фонов и границ с CSS 2.1] (http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/) и смотрите (вы можете играть с ним также) [Demo] (http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/demo/backgrounds.html), вы можете понять концепцию. –
То, что вы можете достичь, состоит в том, чтобы иметь несколько фонов, сидящих друг над другом. Однако не забывайте, что если элементы имеют одинаковый размер и обычный цвет, верхний будет перекрывать остальные, тогда как если вы играете с изображениями и прозрачными фонами, вы можете объединить их по своему желанию, а демонстрация также продемонстрирует. Если мой ответ удовлетворит вас, пожалуйста, примите его. Благодаря! –