Управление фонами в CSS

@M_arina · Регистрация: 13.11.2021

Author24 — интернет-сервис помощи студентам

На фото изображен узор который должен получится в итоге. Проблема в том, что не высвечивается "красная рамка" хотя код для нее написан:

HTML5

1	<div class="dzbg"></div>

CSS

.dzbg{height: 100px; width: 100px; border: 1px solid #ccc; margin: 30px; padding: 30px;
    background:
    url(images/bg1.png) no-repeat left bottom, 
    url(images/bg1.png) no-repeat left bottom ,
    url(images/bg1.png) no-repeat left top , 
    url(images/bg1.png) no-repeat left top , 
    url(images/bg1.png) no-repeat right top , 
    url(images/bg1.png) no-repeat right top , 
    url(images/bg1.png) no-repeat right bottom , 
    url(images/bg1.png) no-repeat right bottom ;
 
    background-size:
    20px 40px, 
    40px, 
    20px 40px,
    40px,
    20px 40px,
    40px,
    20px 40px,
    40px;
    background-color: yellow;
    background-clip: padding-box;
 
    background:
    url(images/bg.png) no-repeat center,
    url(images/fhead.png) no-repeat left top, 
    url(images/fbody.png) no-repeat right top,
    url(images/fbody.png) no-repeat left bottom, 
    url(images/fhead.png) no-repeat right bottom;
 
    background-size:
    30px 30px,
    50px, 
    50px,
    50px,
    50px;
    background-color: yellow;
    background-origin: content-box;
}

@mrtoxas · 04.01.2022, 22:05

Без картинок не понятно, но начиная с 24 строки вы начинаете перезаписывать стили

@M_arina · 05.01.2022, 16:41 **[ТС]**

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

@mrtoxas · 05.01.2022, 20:08

Заверните в архив картинки, html, css и прикрепите архив к сообщению

@M_arina · 08.01.2022, 16:41 **[ТС]**

Вот фото

@M_arina · 08.01.2022, 17:22 **[ТС]**

Разобралась как сделать. Кидаю код, может кому-то пригодится

CSS

.dzbg{height: 120px; width: 120px; border: 30px dashed #B60101; margin: 30px; padding: 20px;
    background: 
                url(images/bg.png) no-repeat center,
                url(images/fbody.png) no-repeat left bottom,
                url(images/fbody.png) no-repeat right top,
                url(images/fhead.png) no-repeat left top,
                url(images/fhead.png) no-repeat right bottom;
    background-color: #EFE025;
    background-size: 30px 30px, auto, auto, auto,auto;
    background-origin: content-box;
    background-clip: border-box;
    box-shadow: 2px 2px 7px -2px #333;
}

Блоги программистов
Подброка решений задач на Python IT_Exp 06.01.2025 Целью данной подборки является предоставление возможности ознакомиться с различными задачами и их решениями на Python, что может быть полезно как для начинающих, так и для опытных программистов. . . .	С чего начать программировать микроконтроллеры raxper 06.01.2025 Введение в мир микроконтроллеров Микроконтроллеры стали неотъемлемой частью современного мира, окружая нас повсюду: от простых бытовых приборов до сложных промышленных систем. Эти маленькие. . .	Из чего собрать игровой компьютер inter-admin 06.01.2025 Сборка игрового компьютера требует особого внимания к выбору комплектующих и их совместимости. Правильно собранный игровой ПК не только обеспечивает комфортный геймплей в современных играх, но и. . .	Обновление сайта www.historian.by Reglage 05.01.2025 Обещал подвести итоги 2024 года для сайта. Однако начну с того, что изменилось за неделю. Добавил краткий урок по последовательности действий при анализе вредоносных файлов и значительно улучшил урок. . .	Как использовать GraphQL в C# с HotChocolate Programming 05.01.2025 GraphQL — это современный подход к разработке API, который позволяет клиентам запрашивать только те данные, которые им необходимы. Это делает взаимодействие с API более гибким и эффективным по. . .	Модель полного двоичного сумматора с помощью логических операций (python) AlexSky-coder 04.01.2025 def binSum(x:list, y:list): s=^y] p=x and y for i in range(1,len(x)): s. append((x^y)^p) p=(x and y)or(p and (x or y)) return s x=list() y=list()
Это мы не проходили, это нам не задавали...(асихронный счётчик с управляющим сигналом задержки). Hrethgir 04.01.2025 Асинхронный счётчик на сумматорах (шестиразрядный по числу диодов на плате, но наверное разрядов будет больше - восемь или шестнадцать, а диоды на старшие), так как триггеры прошли тестирование и. . .	Руководство по созданию бота для Телеграм на Python IT_Exp 04.01.2025 Боты для Телеграм представляют собой автоматизированные программы, которые выполняют различные задачи, взаимодействуя с пользователями через интерфейс мессенджера. В данной статье мы рассмотрим,. . .	Применение компонентов PrimeVue в Vue.js 3 на TypeScript BasicMan 04.01.2025 Введение в PrimeVue и настройка окружения PrimeVue представляет собой мощную библиотеку компонентов пользовательского интерфейса для Vue. js 3, которая предоставляет разработчикам богатый набор. . .	Как стать Senior developer cpp_developer 04.01.2025 В современной индустрии разработки программного обеспечения позиция Senior Developer представляет собой не просто следующую ступень карьерной лестницы, а качественно новый уровень профессионального. . .	Что известно о дате выхода Windows 12 и чего от нее ждать IT_Exp 04.01.2025 В мире технологий постоянно происходят изменения, и операционные системы не являются исключением. Windows 11, выпущенная в октябре 2021 года, принесла множество инноваций и улучшений, но. . .	Что новенького в .NET Core 9 Programming 04.01.2025 Обзор ключевых изменений в . NET Core 9 Платформа . NET Core продолжает активно развиваться, и версия 9 представляет собой значительный шаг вперед в эволюции этой технологии. Новый релиз. . .

@mrtoxas 3826 / 2676 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	04.01.2022, 22:05	2
	Без картинок не понятно, но начиная с 24 строки вы начинаете перезаписывать стили 0

@M_arina 0 / 0 / 0 Регистрация: 13.11.2021 Сообщений: 30
	05.01.2022, 16:41 [ТС]	3
	Я просто не совсем понимаю как объединить background для рамки и средины. По моему коду высвечивается как на приложенной картинке. Но если поменять местами background, то будет высвечиваться только рамка . Скорее всего идет наложение друг на друга и я не знаю как это исправить Миниатюры 0

@mrtoxas 3826 / 2676 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	05.01.2022, 20:08	4
	Заверните в архив картинки, html, css и прикрепите архив к сообщению 0

	08.01.2022, 17:22