Три кусочека (зачёркнуто) слоя фона - градиент, заливка и рисунок. Бывает?

SergeAnt · June 23, 2021

Да, я умею создать проблему на ровном месте.
В данном случае требуется создать шаблон для объявления, состоящий из двухцветной рамки, белого поля для текста и логотипа в его правом нижнем углу (См.пример).
Первое, что приходит на ум - создать DIV с фоном -  первый уровень заливки с градиентом, на него наложить белый фон и на него уже в уголок - логотип.
Например, использовать параметр border-box для градиентной заливки, padding-box для белой, а логотип - в правый нижний угол content-box.
Но, конечно, я всё делаю неправильно и ничего не работает. Как я понимаю, именно заливка цветом ломает работу множественных фонов.
А в принципе это возможно, или нужно усложнить конструкцию для получения результата?
Хотелось бы обойтись одним DIVом. Знаю, что можно для фона использовать несколько картинок, но не уверен, что для каждой можно присваивать разные значения свойства  background-clip:
UPD: проверил, можно. Например - наложить градиент на градиент с разными параметрами background-clip: получается вполне. Проблема именно с плоским цветом.

.test {
	height: 480px; 
	width: 640px;  
	border: 10px black dashed;
	padding: 1em; 
	background-clip: border-box;
	margin: 3em;
	background: linear-gradient(to right, #361D10 0, #361D10 50%, #E04E39 50%, #E04E39 100%), white content-box; /* двухцветный градиент и попытка белого фона*/
}

UPD2

"Цвет фона, если он есть, закрашивается под всеми остальными слоями."
https://html5book.ru/css-background/#multiple-background
Практически же получается, что цвет фона, если есть, должен располагаться только в конце многослойной конструкции, в противном случае его использование ломает всю конструкцию, и ни одного слоя фона отображаться не будет.
Если цвет расположен на последнем месте, слои будут видны, кроме однотонной заливки, т.к. она будет внизу, перекрытая другими слоями.
https://codepen.io/serge777/pen/jOBjZYJ
Это странно и необъяснимо.

Edited June 23, 2021 by SergeAnt

AlexZaw · June 27, 2021

23.06.2021 в 19:43, SergeAnt сказал:

Хотелось бы обойтись одним DIVом

Можно так:

<div class="box">Some text</div>

.box{
  position: relative;
  margin: 50px;
  width: 400px;
  height: 200px;
  background: url(http://placekitten.com/50), #fff ;
  background-repeat: no-repeat; 
  background-position: calc(100% - 10px) calc(100% - 10px);
  border: 15px dashed #000;
	background-clip: content-box;
}
.box:after{
  position: absolute;
  content: '';
  top: -15px;
  left: -15px;
  bottom: -15px;
  right: -15px;
  background-image: linear-gradient(to right, #361D10 50%, #E04E39 50%);
z-index: -1;
}

или так:

<div class="box2">Some text</div>

.box2{
  width: 400px;
  height: 200px;
  border: 15px solid transparent;
  border-image: linear-gradient(to right, #361D10 50%, #E04E39 50%);
  border-image-slice: 1;
  background-image: url(http://placekitten.com/50);
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) calc(100% - 10px);  
}

SergeAnt · June 28, 2021

Ага, спасибо. Я не настолько силён в CSS, многие вещи, несмотря на то, что работают, кажутся неочевидными, понять сложно, проще запомнить.
Тем не менее, уже вижу, что 1й вариант не работает так, как требуется: пунктирная граница искажает рамку.. Смотрю 2й.

2й вариант вовсе не показывает рамку, это результат плохо структурированной лексики CSS 😞
Мой вариант получился проще.
Я всего лишь заменил неработающую почему-то (см.первый тезис) однотонную заливку на однотонный же градиент. И всё!

<style> 
div {
	display:table-cell;
	text-align: center;
	vertical-align: middle;
	height: 480px; 
	width: 640px;  
	border: 2em solid transparent;
	padding: 1em; 
	margin: 3em;
	background: url("http://placekitten.com/50") right 1em bottom 1em no-repeat,
        linear-gradient(to left, white 0, white 100%) padding-box,
		linear-gradient(to right, #361D10 0, #361D10 50%, #E04E39 50%, #E04E39 100%) border-box;
</style>
</head>

<body>
<div>Какой-то текст</div><br>
</body>

1. Рамка прозрачная
2. Заливка градиентная вместе с рамкой
3. Заливка градиентная однотонная внутри рамки
4. Рисунок в углу
5. Текст по центру.

Осталась недосказанность, почему не работает простая заливка в п.3. Может всё же я что-то неправильно делал?

AlexZaw · June 29, 2021

28.06.2021 в 16:21, SergeAnt сказал:

почему не работает простая заливка

Потому, что слой с обычным фоновым цветом (другими словами это обычное свойство background-color) всегда находится в самом низу. А вот положением градиентов которые на самом деле задаются с помощью background-image мы можем управлять

SergeAnt · June 29, 2021

1 час назад, AlexZaw сказал:

Потому, что слой с обычным фоновым цветом (другими словами это обычное свойство background-color) всегда находится в самом низу. А вот положением градиентов которые на самом деле задаются с помощью background-image мы можем управлять

Насколько всё-таки нелогичен и неудобен CSS.
Кстати, в первом приведённом мной коде видно, что однотонная заливка вроде как находится внизу, но вместо ожидаемого эффекта рушит конструкцию, т.е. градиент не видно, хотя он и находится слоем выше.

AlexZaw · June 29, 2021

3 часа назад, SergeAnt сказал:

Насколько всё-таки нелогичен и неудобен CSS.

Все удобно и логично если знать как он работает:

Предупреждение: background-color можно определить только на последнем фоне, поскольку для всего элемента существует только один цвет фона.

https://developer.mozilla.org/ru/docs/Web/CSS/background

SergeAnt · June 29, 2021

22 минуты назад, AlexZaw сказал:

Все удобно и логично если знать как он работает:

Предупреждение: background-color можно определить только на последнем фоне, поскольку для всего элемента существует только один цвет фона.

https://developer.mozilla.org/ru/docs/Web/CSS/background

Вот именно, если ЗАЗУБРИТЬ и методом проб и ошибок убедиться, что работает, а что нет. Интуитивно для новичка не всегда понятно. К слову, я и использовал построение, в котором гладкий фон на последнем месте, но оно не работает:

background: linear-gradient(to right, #361D10 0, #361D10 50%, #E04E39 50%, #E04E39 100%), white content-box;

AlexZaw · June 29, 2021

16 минут назад, SergeAnt сказал:

Вот именно, если ЗАЗУБРИТЬ и методом проб и ошибок убедиться, что работает, а что нет. Интуитивно для новичка не всегда понятно.

Назовите хоть один язык где ничего не надо зубрить и все интуитивно понятно 🙂

16 минут назад, SergeAnt сказал:

в котором гладкий фон на последнем месте, но оно не работает:

background-color можно определить только на последнем фоне, поскольку для всего элемента существует только один цвет фона.

Т.е. этот "гладкий" фон лежит под градиентом. Он там есть и работает, но его просто не видно так как его сверху закрывает градиент. В том, что ваш "гладкий" фон на самом деле присутствует можно убедиться задав полупрозрачный градиент.

Градиенты это не цвет фона, это фоновое изображение

Это как покрасить обои на стене и на них повесить картину. Фоном (background-color)будут являться обои, а картина будет градиентом, т.е. background-image

Если вы поклеите обои поверх картины вы ведь не будете удивляться почему вдруг картины не стало видно? Так и здесь

SergeAnt · June 29, 2021

23 минуты назад, AlexZaw сказал:

Назовите хоть один язык где ничего не надо зубрить и все интуитивно понятно 🙂

Может и не всё, но по крайней мере есть какая-то система, во всех более-менее известных алгоритмических языках, начиная с BASIC 😉
Здесь же, куда ни плюнь - костыли. Дискуссии, как мол выровнять блоки по вертикали, 100500 методов, один неочевиднее другого. Хотя ещё 20 лет назад это делалось на простом HTML таблицей.
Несмотря на скромный лексический запас, нет уверенности, что CSS отработает именно так, как ожидаешь... Плюс к этому разнообразие реакций браузеров. Такое моё мнение, как новичка.

32 минуты назад, AlexZaw сказал:

Это как покрасить обои на стене и на них повесить картину.

Не вижу препятствий, чтобы не покрасить обои гладким цветом, по крайней мере частично. При нормальной типизации, разумеется. Как программист, я мог быпокрасить картину и поклеить на неё обои, ага 😉

34 минуты назад, AlexZaw сказал:

Если вы поклеите обои поверх картины вы ведь не будете удивляться почему вдруг картины не стало видно? Так и здесь

Я имел в виду, что в каких-то случаях у меня и градиент пропадал, и фон. Возможно, при попытке расположить гладкий фон на втором месте. Оставались только граница и текст.
Спасибо за помощь. Не вижу смысла спорить о концепциях, имеем то, что имеем, учиться нужно в любом случае, безусловно.

AlexZaw · June 29, 2021

2 часа назад, SergeAnt сказал:

во всех более-менее известных алгоритмических языках

Так CSS это не язык программирования, поэтому здесь нет четких правил

2 часа назад, SergeAnt сказал:

Плюс к этому разнообразие реакций браузеров

А это вообще не является проблемой CSS 🙂

2 часа назад, SergeAnt сказал:

Возможно, при попытке расположить гладкий фон на втором месте

В этом то и дело, цвет фона должен задаваться в конце. А вообще это извечная проблема при использовании сокращенных свойств. Чтобы не путаться можно использовать полные свойства, тогда никаких конфликтов и недопонимания не будет.

SergeAnt · June 30, 2021

15 часов назад, AlexZaw сказал:

Так CSS это не язык программирования, поэтому здесь нет четких правил

Рискуя получить люлей за офтопик, промолчать не могу.
Безусловно, CSS - это средство программирования, язык программирования, инструмент программирования, не путайте с алгоритмическим языком. Используя CSS, мы программируем внешний вид и поведение интерфейса веб-страницы. CSS обладает как свойствами языка разметки, так и, между прочим, некоторыми качествами алгоритмического языка. И как любой инструмент, будь то хирургический, или столярный, или автомобиль, он может быть более или менее удобным. Как часто мы слышим "да, есть странности, но я привык". Приспособиться можно ко всему, но хотелось бы тратить меньше времени жизни на обучение и отладку, вызванную неочевидным для новичка результатом использования лексических конструкций. Хотя выбора, у нас, конечно, нет ;)

AlexZaw · June 30, 2021

37 минут назад, SergeAnt сказал:

Безусловно, CSS - это средство программирования, язык программирования, инструмент программирования

CSS - формальный язык описания внешнего вида документа, написанного с использованием языка разметки

HTML и CSS описывают представление , тогда как языки программирования описывают функцию

52 минуты назад, SergeAnt сказал:

но хотелось бы тратить меньше времени жизни на обучение и отладку, вызванную неочевидным для новичка результатом использования лексических конструкций

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

SergeAnt · June 30, 2021

3 часа назад, AlexZaw сказал:

CSS - формальный язык описания внешнего вида документа, написанного с использованием языка разметки

HTML и CSS описывают представление , тогда как языки программирования описывают функцию

Не совсем так. HTML идеологически описывает логическую структуру документа, а не его внешний вид.
Языки программирования НЕ описывают функцию.Язык программирования - набор правил, позволяющий человеку однозначно сформулировать компьютеру задачу, обычно на хранение, обработку и отображение данных. Интерфейс между мыслью и машинными кодами конкретного процессора. Функции - лишь один из возможных инструментов, но не обязательный. Кроме функционального программирования, есть, например, логическое. Кстати, функции есть и в CSS.
Отсутствие чёткой концепции CSS, на мой взгляд, - основная его проблема. Как следствие - вольная интерпретация браузерами и собственно, существование 100500 дискуссий "как реализовать кнопку".
Несмотря на явную избыточность лексики CSS, функциональности постоянно не хватает, появляются новые уровни вложенности, фреймворки, JQuery и т.п.

И в том числе

4 часа назад, AlexZaw сказал:

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

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

AlexZaw · June 30, 2021

8 часов назад, SergeAnt сказал:

HTML идеологически описывает логическую структуру документа, а не его внешний вид.

а я и не говорил что HTML описывает внешний вид, хотя у него и есть такие возможности. Пусть немного, но есть.

8 часов назад, SergeAnt сказал:

.Язык программирования - набор правил, позволяющий человеку однозначно сформулировать компьютеру задачу

Ну вот как минимум по этому критерию CSS не проходит в ЯП 🙂

8 часов назад, SergeAnt сказал:

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

Абсолютно эквивалентны и абсолютно во всех случаях можно заменить как универсальное свойство отдельными свойствами, так и наоборот. Другое дело что некоторые отдельные свойства не имеют смысла в отрыве от других, но заменить можно всегда

Sign In

Три кусочека (зачёркнуто) слоя фона - градиент, заливка и рисунок. Бывает?

Question

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information