Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.85/13: Рейтинг темы: голосов - 13, средняя оценка - 4.85
8 / 0 / 2
Регистрация: 11.06.2016
Сообщений: 261

Cкрыть содержимое под прозрачным фиксированным блоком

23.07.2016, 20:50. Показов 2714. Ответов 9
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Как скрыть контент который попадает под фиксированный ПРОЗРАЧНЫЙ блок, при прокрутке допустим.?
Миниатюры
Cкрыть содержимое под прозрачным фиксированным блоком  
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
23.07.2016, 20:50
Ответы с готовыми решениями:

Cкрыть текст под ссылкой, чтобы он отображался только при наведении на неё
Добрый день! Подскажите, как мне скрыть текст под ссылкой, чтобы он отображался только при наведении на неё?

Сделать тень под блоком
Необходимо сделать полукруглую тень под блоком, с учетом блок будет растягиваться на всю ширину страницы, то есть будет адаптивным.

Текст под основным блоком
Добрый вечер Подскажите пжлст, можно ли в css прописать один раз текст под основной блок (как на картинке), чтобы он там поселился и...

9
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
23.07.2016, 21:21
Сделать его не прозрачным
0
8 / 0 / 2
Регистрация: 11.06.2016
Сообщений: 261
23.07.2016, 21:24  [ТС]
Цитата Сообщение от mrtoxas Посмотреть сообщение
Сделать его не прозрачным
а если нужно чтобы оно оставалось прозрачным)..?
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
23.07.2016, 21:25
я не понимать. надо, чтобы был прозрачным, но под ним ничего не отображалось?
0
8 / 0 / 2
Регистрация: 11.06.2016
Сообщений: 261
23.07.2016, 21:29  [ТС]
да, так как например нужно чтобы при скролинге(верх/низ) цвет фиксированого меню соответствовал цвету секции
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
23.07.2016, 21:33
Может через JS как-то, но это будет не очень красиво. Делайте его фиолетовым и фиксированным. Хотя, я сомневаюсь, что в этом шаблоне фиксированная шапка.
0
25 / 25 / 19
Регистрация: 13.07.2015
Сообщений: 433
23.07.2016, 22:22
Может просто сделать цвет фиксированного элемента таким же как цвет фона страницы?
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
23.07.2016, 22:26
Aqua77, там блоки разных цветов идут. Насколько я понял, ТС хочет, чтобы когда под меню был фиолетовый блок, то меню перекрашивалось в фиолетовый, потом в зеленый. Можно его сделать прозрачным, но тогда будут накладываться надписи некрасиво. А выборочно скрывать под блоком элементы не получится.
0
Богатый духовно
 Аватар для boilzzz
455 / 262 / 145
Регистрация: 10.03.2015
Сообщений: 1,057
24.07.2016, 06:07
mrtoxas, marketarea, Можно сделать с помощью js, замену цвета на при определьном положение скрола.

Добавлено через 10 минут
песочница
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
html, body {
    height: 100%;
    background-color: white;
    box-sizing: border-box;
    font-family: 'Titillium Web', sans-serif;
}
 
/*body {
    position: relative;
    top: 0;
    left: 0;
}*/
 
.wrapper {
    width: 100%;
  
}
 
header {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
       background-color: #87509c;
     
    /*border: 1px solid red;*/
}
 
.logo {
    /*position: relative;*/
    box-sizing: border-box;
    /*top: 0;
    left: 0;*/
    font-size: 7em;
    /*height: 1em;*/
    font-weight: bold;
    color: white;
    text-align: center;
    /*border: 1px solid #b3602d;*/
}
 
[type="checkbox"] {
    display: none;
}
 
label {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    box-sizing: border-box;
    border: 1px solid white;
    font-size: 7em;
    color: white;
    width: 1em; /* если не указывать то label после клика плывет/уменьшается по ширине */
    /*height: 1em;*/
    text-align: center;
}
 
label:after {
    content: "\2630";
}
 
.menu {
    display: none;
    box-sizing: border-box;
    /*position: relative;
    top: 0;
    right: 0;*/
    /*border: 1px solid green;*/
}
 
#menu-button:checked ~ .menu {
    display: block;
    text-align: justify;
    text-align-last: justify;
}
 
#menu-button:checked ~ label:after {
    content: "\2716";
}
 
#menu-button:checked ~ .menu > li {
    display: inline-block;
 
}
 
.menu > li > a {
    font-size: 3em;
    text-transform: uppercase;
    /*border-bottom: 1px dashed wheat;*/
}
 
/*.menu > li > a:hover {
    border: 0;
}*/
 
/*.menu > li:hover {
    background-color: #5b3d76;
}*/
 
#home {
    height: 100%;
    background-color: #87509c;
    padding-top:100px;
}
 
.blockDescription {
  margin:0 auto;
    width: 99%;
    color: white;
    text-align: center;
}
 
.blockDescription > p {
    font-size: 6em;
    font-weight: bold;
    margin:0;
}
 
.btn {
    display: inline-block;
    padding: 1.003584229390681em 0.9000000000000001em;
    border-bottom: 0.25em solid #b36a43;
    border-radius: 0.25em;
    text-transform: uppercase;
    font-size: 4em;
}
 
.btnHome {
    margin-top: 1em;
    background-color: #d27c4f;
}
 
.btn:before {
    display: inline-block;
    content: "";
    height: 100%;
    vertical-align: middle;
}
 
#services {
    height: 100%;
    background-color: #17c2a4;
}
 
@media only screen and (orientation: landscape) {
    .menu > li > a {
        font-size: 2em;
    }
 
    .blockDescription > p {
        font-size: 2.5em;
    }
 
    .btn {
        font-size: 1.5em;
    }
 
    .btnHome {
        margin-top: 1em;
    }
}
JavaScript
1
2
3
4
5
6
7
8
9
10
var height = $('#home').height();
  $(window).scroll(function() {
    var top = $(this).scrollTop();
    if ( top >= height) {
       $('header').css({ background:" #17c2a4"});
 
    } else if ( top <= height) {
      $('header').css({ background:"#87509c"});
    }
  });
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<header class="wrapper">
    <div class="logo">Cuda</div>
    <input type="checkbox" id="menu-button">
    <label for="menu-button"></label>
    <ul class="menu">
        <li><a href="#home">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Work</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Contact</a></li>
    </ul>
</header>
<body>
<div id="home">
    <div class="blockDescription">
        <p>Hi there! We are the new kids on the block<br> and we build awesome websites and mobile apps.</p>
        <a class="btn btnHome" href="">Work with us!</a>
    </div>
</div>
<div id="services"></div>
0
8 / 0 / 2
Регистрация: 11.06.2016
Сообщений: 261
24.07.2016, 10:55  [ТС]
ага, принял. а с CSS я так понл не как?
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
24.07.2016, 10:55
Помогаю со студенческими работами здесь

Как сделать блок под блоком?
Всем привет, вот такой вопрос, помогите пож... Как добавить еще блоки под левый блок, что бы не накладывались... И еще, как в...

Фон под блоком <blockquote> налазит на изображение
Вот ситуация. Нижний информационный блок blockquote растягивает фон на всю ширину, а надо, чтобы он вместе с текстом поместился левее...

Почему блок под блоком не выравнивается по центру?
Добрый день! Слепил простенький пример. &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Trial&lt;/title&gt; &lt;style type=&quot;text/css&quot;...

Как выставить один после блока, а не под блоком?
Приветствую! Пытаюсь задать положение блока div сразу за таким же блоком, а не под ним. Ввожу display:inline-block, но следующий блок в...

Сохранить содержимое Image с прозрачным фоном
Здравствуйте. Уже сломал всю голову, подскажите что делать. Есть TImage, я в него загружаю png, после сохраняю изображение по кнопке. Все...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D
8Observer8 04.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий
8Observer8 02.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&amp;d=1772460536 Одним из. . .
Реалии
Hrethgir 01.03.2026
Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .
Ритм жизни
kumehtar 27.02.2026
Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .
SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten
8Observer8 27.02.2026
Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами
8Observer8 20.02.2026
Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист
damix 19.02.2026
Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI
Eddy_Em 18.02.2026
Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru