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)

Black_Star 10.01.2017 14:53
Маскирование фонов
 
Добрый день уважаемые. Подскажите как реализовать маскирование фонов в 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%);
но у меня почему то ни чего не прошло. Как сделать так что б круг игнорировал фон своего непосредственного родителя ?

ksa 10.01.2017 15:56
Цитата:
Сообщение от 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>

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

ksa 10.01.2017 16:07
Цитата:
Сообщение от Black_Star
Необходимо именно что б просвечивался
Тогда делай у square фон "картинкой с дыркой"...

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

ksa 10.01.2017 16:33
Цитата:
Сообщение от Black_Star
как это реализовать без подгрузки внешних фаилов? (чистый CSS
Перевести ту картинку с дыркой в ДиБейс64 и засунуть в ЦСС...

Black_Star 10.01.2017 17:16
Цитата:
Сообщение от ksa (Сообщение 440239)
Перевести ту картинку с дыркой в ДиБейс64 и засунуть в ЦСС...
Это как? Первый раз слышу про такую технологию

рони 10.01.2017 18:18
Black_Star,

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


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

  </style>

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

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

Black_Star 10.01.2017 19:13
А всё понял, http://anosov.me/services-base64image/ вот оно что :)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css" media="screen">
.block{
background-color: red;
width: 200px;
height: 200px; 
}
.wrap{
  width: 200px;
height: 200px; 
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAL4AAAC+CAMAAAC8qkWvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjRBMTg3RjZERDc1MDExRTZCMzBFQTBDMTExMENBRkQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjRBMTg3RjZFRDc1MDExRTZCMzBFQTBDMTExMENBRkQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEExODdGNkJENzUwMTFFNkIzMEVBMEMxMTEwQ0FGRDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEExODdGNkNENzUwMTFFNkIzMEVBMEMxMTEwQ0FGRDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4X8dleAAAA8FBMVEUAAAAgICAhICDr5eVVPj7Go6PRtbVeRESrgYHf0dGpfn7Wv7/p4+PUu7v7+/vKqanLq6v5+fmGYGA2LCxXQEC+l5eofn6mfHzNr698WFgsJiZaQkK5kZHu6+szKirTublPOjpqTEzg09Pn399LODjHpaW2jY17WFhkSEhMODjSt7fs5+dbQkLFoaF5VlbCnZ20i4slIiKtg4MnJCTDn59RPDzm3d2ddHTt6ekyKip+WlpiRkYvKChlSEhoSkrEn5/o4eGccnK/mZmXbm7Nra2kenrVvb2Ybm5YQECZcHC3j49nSkphRka6k5NSPDz///9s7QpmAAAAUHRSTlP/////////////////////////////////////////////////////////////////////////////////////////////////////////ABNzpnkAAAPUSURBVHja7J2HUttAEEC1kizLMjauYGOwMab3Dgmd9Lr//zcJmcAkmUmicnu3O+z7grenk+50ZdfzFEVRFEVRFEVRFMUm8IQs67CV3FQrQRN/0gyWqjdJK+QeB8BFHN3iX7mN4nWuMUB5v4IpqOyXuUUAfv91HVNT7/V9PiHApwZmpnHNIgAYJgHmIkiGriOA5RUswMqyywAgHGFBRqGrAGAxQgNEJy4CgHYJDVFqWw/Af4MGmfUtD1GnaJRTm0PZUReN0z2y1fSDAAkIBlYeAMwiEbMW/OdqSEZtjnygOkdCzmkHMVhDYtYI/eEOyTkj84ePaIF5In/YQyvskfj702iJaYIpBFiz/+4PUnsOTf+BebSK2fcXXqFl3hn0h120zq45/6/ogNDYLG3Bhf6Cofkb1NAJNSPdh25+b2X+30FnvC9ufxC40w8OCnedLjqkW7T7lNEp5YLTzFO3+pNCk0+YQcfMFOk+bXROu0Djl9zrl/I3/yIyYDF340cc9COQN97+Sidn42/y0B/la/4NZMKG1M9OgY/PC2TDMId+zEc/ztF3pvjoB9l7zzUyYsx5TfD/NLI2v4+syDpvXuOl/zKjfo+Xfi9j16/z0q9n6/zbyIztTPqr3PRXM/WdCjf9Csj9bGb9dK7z07/IoH/IT/8wg37ETz+SOdt8ZCr9uwvIkPT6IUf99HtdLY76rdT6CUf9JLX+Dkf9Umr9Kkf9amr9Ckf9pdT6Wxz1t1J/9psc9ZsgedRKP26pvuqrvuqrflZ92cOW8EmD9Cmb8Amz8N8Vlj+L8XP5VRe+UCJ8mUr4IqHwJVrpC+QMtyfWn8/mkPCtOeEbo9K3pYUfChB+JEP6gRjhx5GEHwbzxpz0Mx/Fk34QUvgxVOmHgIUfwRZ+AN6DEQ/7nNcPhF/+YHL1ZjP3zSfZF5+kXzsTfulP+pVLz5+4tZ8UzLYi+7qx9Mvewq/ae97Anf7AQJ4G4WkmnCX5eGsoR4zsFCuO9rqMJbiRnl7Igw+27e/MJqeynFrri+nUYMc27Y/NJ2Zr2LNvEKT1k53Uz17/OaZKCWnl/Z2nS8h5Rm9/RpkOtU9t36dNRhuSzn8WyPPBX1ImMr70yKFbfZixkwZbdBJvjyaF+r2tFOoPD6BseP1n8tluBQHf6BuQ2C0f4Ekv3vAQwImR7E+bJ85qf3QK7x/VOk4rr0guG/MjgPxFe+Ihj7JD4zwlk8aMaj75/Z7YglWPQ5nYcmFPD+Eqjv5xEmUqiq989gXnwlayU136vVTeTsy/VN6fcUgsVKgoiqIoiqIoiqII55sAAwD03UZoGobgKQAAAABJRU5ErkJggg==);
}
</style>
</head>
<body>
<div class="block">
  <div class="wrap">   
  </div>
</div>
</body>
</html>

ksa 11.01.2017 08:19
Цитата:
Сообщение от Black_Star
вот оно что
Разобрался значит... :)

Black_Star 11.01.2017 13:10
Ага, разобрался. :) Но поскольку я сторонник чистого кода, то идею решил реализовать через SVG маски http://codepen.io/BlackStar1991/pen/KaVrPa

Malleys 21.01.2017 02:35
Как вариант использовать mix-blend-mode: multiply;
<!DOCTYPE html><html lang="en">
	<head>
		<meta charset="utf-8">
		<style type="text/css">

			.bigBlock{
				width: 100px;
				height: 100px;
				background-color: red;
			}

			.square{
				width: 100px;
				height: 100px;
				background-color: black;
				mix-blend-mode: multiply;
			} 

			.circle{
				width: 100px;
				height: 100px;
				border-radius: 50%;
				background: white;
			}

		</style>
	</head>
	<body>
		<div class="bigBlock">
			<div class="square">
				<div class="circle"></div>
			</div>
		</div>
	</body>
</html>


Если позволите упростить вашу HTML-разметку и использовать радиальный градиент, то можно так.
<!DOCTYPE html><html lang="en">
	<head>
		<meta charset="utf-8">
		<style type="text/css">

			.bigBlock {
				width: 100px;
				height: 100px;
				background-color: red;
			}

			.square {
				width: 100px;
				height: 100px;
			} 

			.circle {
				background: radial-gradient(closest-side at 50% 50%, transparent 90%, black calc(90% + 1px)) 0 0 / 100px 100px;
			}

		</style>
	</head>
	<body>
		<div class="bigBlock">
			<div class="square circle">
		</div>
	</body>
</html>


http://codepen.io/anon/pen/RKpmYW?editors=1100


Часовой пояс GMT +3, время: 06:18.