У меня есть блок, у него задан полупрозрачный фоновый цвет через rgba.
Когда я масштабирую в браузере этот блок на странице сайта, то полупрозрачный фон начинает уменьшаться и в самом блоке. Но, если прозрачность альфа канала выставить на 1, то такая проблема исчезает. Т.е. если я ставлю обычный фон, то все нормально, но как только пытаюсь сделать его прозрачным, то при увеличении окна браузера он просто уменьшается.
Подскажите, как это справить, уже второй час ломаю голову.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main"></div >
</body>
</html>
body{
background: url(images/bg-one.png) 0 0/100% 100% no-repeat #000;
color: white;
}
.main{
width: 3500px;
height: 2000px;
position: relative;
margin: 100px auto;
box-shadow: 0px 20px 25px 10px green;
border-radius: 150px;
background: url(images/bg-image.png) 1150px 100% no-repeat, url(images/gb-poloska.png) 950px 100% no-repeat rgba(128, 128, 128, 0.1);
}
Простой
Средний
