Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
8 / 1 / 0
Регистрация: 10.01.2018
Сообщений: 35
1

Множественный фон с наследованием у псевдоэлемента after

31.01.2018, 17:25. Показов 439. Ответов 2
Метки нет (Все метки)

Здравствуйте.
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
div {
    width: 100px;
    height: 100px;
    position: relative;
    background: url("2.png") no-repeat 0 0;
}
div:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 100%;
    left: 100%;
}
Для div:after
CSS
1
background: inherit;
работает, изображение заданное в свойствах для div.

CSS
1
2
background: linear-gradient(to top, rgba(255,255,255,0), #fff) no-repeat 0 0,
                   url("2.png") no-repeat 0 0;
работает, на изображение наложен градиент.

CSS
1
2
background: linear-gradient(to top, rgba(255,255,255,0), #fff) no-repeat 0 0,
                   inherit;
не работает.

Можно ли все же объединить градиент и наследование в множественный фон?
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
31.01.2018, 17:25
Ответы с готовыми решениями:

Множественный фон и рамка
Нужно, чтобы у дива с фоновой картинкой была рамка сверху и снизу как на рисунке. Всё, что у...

Псевдоэлемент after(before) у псевдоэлемента after(before)
Вопрос может странный, но как сделать у псевдоэлемента after или before ещё один такой же...

Приоритет псевдоэлемента
Псевдоэлемент first-line красит первую строку абзаца в синий, но я создал индивидуальный класс...

Ширина псевдоэлемента по содержимому
Доброго времени суток. Есть подобный код: .mySpan:after{ display:inline-block; ...

__________________
2
417 / 379 / 163
Регистрация: 03.01.2013
Сообщений: 966
31.01.2018, 21:40 2
inherit используется для всего значения свойства, а не для отдельных его частей.
Например, так можно
CSS
1
padding: inherit;
А так - нет:
CSS
1
padding: 10px inherit;
1
Модератор
Эксперт JSЭксперт HTML/CSS
3609 / 2523 / 1489
Регистрация: 12.07.2015
Сообщений: 6,477
Записей в блоге: 4
31.01.2018, 22:00 3
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
div {
  width: 100px;
  height: 100px;
  position: relative;
  --main-bg: url("2.png") no-repeat 0 0;
  background:var(--main-bg);
}
div:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 100%;
  left: 100%;
  background:linear-gradient(to top, rgba(255,255,255,0), #fff) no-repeat 0 0, var(--main-bg);                     
}
Но работать будет не везде
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
31.01.2018, 22:00

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Синтаксис псевдоэлемента hover
Перечитал все что нашел, но ответа вразумительного не нашел. Простые случаи заменить стили у...

Градиент для псевдоэлемента
Здравствуйте подскажите пожалуйста как для IE(8-9) прописать линейный градиент с прозрачностью?...

Применение псевдоэлемента: before к избранным тегам
Доброго времени суток! Есть несколько маркированных списков. В некоторых хочется поменять вид...

Как сделать нижнее подчеркивание у псевдоэлемента
.main:after { content:""; border-bottom:5px solid crimson; } вот небольшой код,...


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

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.