#html #css #image #position #padding
#HTML #css #изображение #положение #заполнение
Вопрос:
Я пытаюсь расположить круглое изображение с помощью css, но оказывается, что вокруг него есть прозрачное пространство / отступы! Вот изображение:
Я пытался padding: 0;
, margin: 0;
но это не работает! Это пространство портит макет и положение любого другого элемента!
Вот html (внутри тега body):
<body>
<div class="container">
<DIV class="navbar">
<div class="logo">
<img src="images/logo.png">
</div>
<nav>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Library</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="user">
<p>"User's name"</p>
<img src="images/girl.png">
</div>
</DIV>
</div>
</body>
И вот полный css:
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container{
width: 100%;
height: 100vh;
background-image: url(images/background.jpg);
background-position: center;
background-size: cover;
position: relative;
padding-top: 2em;
box-sizing: border-box;
}
.navbar{
width: 100%;
height: 60px;
display: flex;
align-items: center;
background: rgba(29,33,61,0.5);
padding: 0 60px;
box-sizing: border-box;
}
.logo{
width: 155px;
}
.logo img{
width: 2.2em;
position: relative;
z-index: 10;
cursor: pointer;
}
nav{
display: flex;
flex: 1;
}
nav ul li{
list-style: none;
display: inline-block;
margin-right: 60px;
}
nav ul li a{
text-decoration: none;
color: #fff;
font-size: 14px;
}
.user{
display: flex;
align-items: center;
color: #fff;
font-size: 14px;
}
.user img{
width: 270px;
cursor: pointer;
padding: 0;
margin: 0;
position: relative;
top: 10px;
left: 50px;
}
Как бороться с такими сценариями? Есть ли лучшая альтернатива?
Комментарии:
1. Принимаете ли вы во внимание альфа-канал / прозрачный фон, который имеет это изображение PNG? Если это не так, то, вероятно, проблема в этом.
2. Я думаю, что это не так! Спасибо!……… Но можете ли вы также предоставить точное решение? Нужно ли мне редактировать изображение? Использовать другой? На самом деле я мало что знаю об этом альфа-канале / прозрачном фоне !