Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 10.01.2017, 18:13
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 230

А всё понял, 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>

Последний раз редактировалось Black_Star, 10.01.2017 в 18:21.
Ответить с цитированием
  #12 (permalink)  
Старый 11.01.2017, 07:19
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 11,239

Сообщение от Black_Star
вот оно что
Разобрался значит...
Ответить с цитированием
  #13 (permalink)  
Старый 11.01.2017, 12:10
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 230

Ага, разобрался. Но поскольку я сторонник чистого кода, то идею решил реализовать через SVG маски http://codepen.io/BlackStar1991/pen/KaVrPa
Ответить с цитированием
  #14 (permalink)  
Старый 21.01.2017, 01:35
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 181

Как вариант использовать 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
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск