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

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

On 6/23/2021 at 12:43 PM, SergeAnt said:

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

Expand

Можно так:

<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

On 6/28/2021 at 9:21 AM, SergeAnt said:

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

Expand

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

SergeAnt · June 29, 2021

On 6/29/2021 at 9:34 AM, AlexZaw said:

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

Expand

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

AlexZaw · June 29, 2021

On 6/29/2021 at 11:00 AM, SergeAnt said:

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

Expand

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

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

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

SergeAnt · June 29, 2021

On 6/29/2021 at 2:09 PM, AlexZaw said:

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

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

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

Expand

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

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

AlexZaw · June 29, 2021

On 6/29/2021 at 2:34 PM, SergeAnt said:

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

Expand

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

On 6/29/2021 at 2:34 PM, SergeAnt said:

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

Expand

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

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

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

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

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

SergeAnt · June 29, 2021

On 6/29/2021 at 2:44 PM, AlexZaw said:

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

Expand

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

On 6/29/2021 at 2:44 PM, AlexZaw said:

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

Expand

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

On 6/29/2021 at 2:44 PM, AlexZaw said:

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

Expand

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

AlexZaw · June 29, 2021

On 6/29/2021 at 3:22 PM, SergeAnt said:

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

Expand

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

On 6/29/2021 at 3:22 PM, SergeAnt said:

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

Expand

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

On 6/29/2021 at 3:22 PM, SergeAnt said:

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

Expand

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

SergeAnt · June 30, 2021

On 6/29/2021 at 5:45 PM, AlexZaw said:

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

Expand

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

AlexZaw · June 30, 2021

On 6/30/2021 at 9:44 AM, SergeAnt said:

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

Expand

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

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

On 6/30/2021 at 9:44 AM, SergeAnt said:

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

Expand

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

SergeAnt · June 30, 2021

On 6/30/2021 at 10:31 AM, AlexZaw said:

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

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

Expand

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

И в том числе

On 6/30/2021 at 10:31 AM, AlexZaw said:

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

Expand

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

AlexZaw · June 30, 2021

On 6/30/2021 at 2:52 PM, SergeAnt said:

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

Expand

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

On 6/30/2021 at 2:52 PM, SergeAnt said:

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

Expand

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

On 6/30/2021 at 2:52 PM, SergeAnt said:

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

Expand

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

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