Javascript-форум - Маскирование фонов

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - Маскирование фонов (https://javascript.ru/forum/xhtml-html-css/66783-maskirovanie-fonov.html)

Маскирование фонов

Добрый день уважаемые. Подскажите как реализовать маскирование фонов в CSS ?
Приведу простой пример:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style type="text/css" media="screen">
	.bigBlock{
  width: 100px;
  height: 100px;
  background-color: red;
}
 .square{
  width: 100px;
  height: 100px;
  background-color: black;
} 
.circle{
   width: 100px;
  height: 100px;
  -webkit-border-radius: 50%;
  -moz-border-radius:50% ;
  border-radius: 50%;
  border: 1px solid #fff;
}
</style>
</head>
<body>
	<div class="bigBlock">
          <div class="square">
           <div class="circle"></div>
     </div>
  </div>
</body>
</html>

Задание, как сделать так что б у верхнего круга был виден вон который у класса .bigBlock. То есть на выходе я хочу получить красный круг в чёрной оконтовке. Я пробвал работать через свойство
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
но у меня почему то ни чего не прошло. Как сделать так что б круг игнорировал фон своего непосредственного родителя ?

Цитата:

Сообщение от Black_Star

Как сделать так что б круг игнорировал фон своего непосредственного родителя ?

Указать ему, нужный тебе, цвет...

<style type='text/css'>
.bigBlock{
	width: 100px;
	height: 100px;
	background-color: red;
}
	.square{
	width: 100px;
	height: 100px;
	background-color: black;
} 
.circle{
	width: 100px;
	height: 100px;
	-webkit-border-radius: 50%;
	-moz-border-radius:50% ;
	border-radius: 50%;
	border: 1px solid #fff;
	background-color: red;
}
</style>
<div class="bigBlock">
	<div class="square">
		<div class="circle"></div>
	</div>
</div>

:stop: Это не наш метод. Необходимо именно что б просвечивался.

Цитата:

Сообщение от Black_Star

Необходимо именно что б просвечивался

Тогда делай у square фон "картинкой с дыркой"...

Да, это должно сработать, спасибо, а может есть идеи как это реализовать без подгрузки внешних фаилов? (чистый CSS SVG ?)

Цитата:

Сообщение от Black_Star

как это реализовать без подгрузки внешних фаилов? (чистый CSS

Перевести ту картинку с дыркой в ДиБейс64 и засунуть в ЦСС...

Цитата:

Сообщение от ksa (Сообщение 440239)

Перевести ту картинку с дыркой в ДиБейс64 и засунуть в ЦСС...

Это как? Первый раз слышу про такую технологию

Black_Star,

<style type="text/css">body {


background-image: url('data:image/jpeg;base64,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');
}

  </style>

Спасибо конечно, но мне это ничего не прояснило :no:

Black_Star,
нарисовать картинку - перевести в цифру - добавить в css :-?