#html #css #overflow #border
Вопрос:
Поэтому я создал простой элемент с закругленными углами и рамкой толщиной 1 пиксель overflow: hidden , а также серым наложением при наведении. Проблема в том, что существуют эти странные «пробелы» (см. Рисунок). Есть идеи, как это решить? То же самое происходит как в Chrome, так и в Edge, поэтому это не должно быть проблемой браузера.
HTML:
lt;div class="profile-container"gt; lt;div class="pfp-container"gt; lt;img class="pfp" src="img/pfp/default3.png"gt; lt;div class="pfp-overlay"gt;Change photolt;/divgt; lt;/divgt; lt;div class="name-age"gt;Namelt;brgt;Agelt;/divgt; lt;div id="profile-description" class="profile-description"gt;Descriptionlt;/divgt; lt;/divgt; CSS:
.pfp-container{ display: block; border:1px solid black; height: 100px; width: 100px; border-radius: 100px; margin: 10px auto; overflow:hidden; position: relative; } .pfp{ height: 100%; width: 100%; } .pfp-overlay{ display: flex; background-color: #00000050; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; align-items: center; text-align: center; color: white; user-select: none; font-weight: bold; } Заранее спасибо!
Ответ №1:
Я не уверен, что правильно понимаю вашу проблему, но я исправил ваш код во фрагменте.
.pfp-container{ display: block; border:1px solid black; height: 100px; width: 100px; border-radius: 100px; margin: 10px auto; overflow:hidden; position: relative; } .pfp{ height: 100%; width: 100%; } .pfp-overlay{ background-color: #00000050; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; text-align: center; color: white; user-select: none; font-weight: bold; display: grid; justify-content: center; align-content: center; } lt;div class="profile-container"gt; lt;div class="pfp-container"gt; lt;img class="pfp" src="img/pfp/default3.png"gt; lt;div class="pfp-overlay"gt;Change photolt;/divgt; lt;/divgt; lt;div class="name-age"gt;Namelt;brgt;Agelt;/divgt; lt;div id="profile-description" class="profile-description"gt;Descriptionlt;/divgt; lt;/divgt;