#html #css #css-position #overlay
Вопрос:
Код:
.overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: blue; } .cont:hover .overlay { opacity: 1; } .text { color: gold; font-size: 10px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } lt;article class="box box9"gt; lt;div class="cont"gt;lt;img src="images/Me 2.jpg" height="200px" alt="Community Program Coordinator and Interim Communications Director for the United Minority Media Association. " class="image"gt; lt;div class="overlay text"gt; lt;div class="text"gt;Ruby Watson is the Community Program Coordinator and Interim Communications Director for the United Minority Media Association. Since 2000, She has worn many hats with this organization. She was the Recording Secretary, Publicist, and National Newsletter/Magazine Editor of UMMA Media News for the United Minority Media Association. She also serves on the Time Well Spent Committee and UMMA KC Watch and is working with our web developer for the ummahqkc1.org website. Ruby has a Bachelor’s in Communications and a Master of Liberal Arts degree. While working on her undergraduate degree, she interned as the Assistant Producer for the Walt Bodine Show, KCUR 89.3 AM, and as production interns for KKFI 90.1 FM and Kansas City Public Television station where she worked closely with Nick Haines, Executive Producer of Public Affairs/News.lt;/divgt; lt;/divgt; lt;/divgt; lt;h2gt;Ruby Watson, Interim Vice President of Communicationslt;/h2gt; lt;/articlegt; lt;article class="box box9"gt; lt;div class="cont"gt;lt;img src="images/Me 2.jpg" height="200px" alt="Community Program Coordinator and Interim Communications Director for the United Minority Media Association. " class="image"gt; lt;div class="overlay text"gt; lt;div class="text"gt;Ruby Watson is the Community Program Coordinator and Interim Communications Director for the United Minority Media Association. Since 2000, She has worn many hats with this organization. She was the Recording Secretary, Publicist, and National Newsletter/Magazine Editor of UMMA Media News for the United Minority Media Association. She also serves on the Time Well Spent Committee and UMMA KC Watch and is working with our web developer for the ummahqkc1.org website. Ruby has a Bachelor’s in Communications and a Master of Liberal Arts degree. While working on her undergraduate degree, she interned as the Assistant Producer for the Walt Bodine Show, KCUR 89.3 AM, and as production interns for KKFI 90.1 FM and Kansas City Public Television station where she worked closely with Nick Haines, Executive Producer of Public Affairs/News.lt;/divgt; lt;/divgt; lt;/divgt; lt;h2gt;Ruby Watson, Interim Vice President of Communicationslt;/h2gt; lt;/articlegt; Текст, отображаемый на наложении, не помещается в поле, для которого он предназначен
Как я могу убедиться, что текст действительно перемещается по левому и правому полям, чтобы поместиться на прямоугольном наложении? Заранее спасибо!
Комментарии:
1. Удалите все верхнее/левое/преобразование и просто сделайте так, чтобы текстовое наложение было 100% шириной и высотой подложки.
2. Можно ли добавить сюда еще CSS-код? Я не получаю тот же результат, что и ваше изображение, когда запускаю его.
3. Авиа — Есть еще кое-что, но это основа того, что используется для html.
4. Паули_Д, спасибо тебе. Я постараюсь это сделать
Ответ №1:
Да. Не хватает некоторого css, чтобы все выстроилось правильно.
Я изменил как можно меньше, чтобы это работало с тем, что у вас уже было, чтобы я не испортил другие вещи, которые могут быть связаны.
В качестве изображения использовался ваш снимок экрана, поэтому ширину и высоту необходимо изменить.
.image { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .overlay { position: absolute; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: blue; } .cont { width: 400px; height: 400px; } .cont:hover .overlay { background-color: blue; opacity: 1; width: 290px; height: 220px; } .text { width: -moz-fit-content; width: fit-content; color: gold; font-size: 10px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } lt;article class="box box9"gt; lt;div class="cont"gt; lt;img src="https://i.stack.imgur.com/nuPgf.png" alt="Community Program Coordinator and Interim Communications Director for the United Minority Media Association. " class="image"gt; lt;div class="overlay text"gt; lt;div class="text"gt;Ruby Watson is the Community Program Coordinator and Interim Communications Director for the United Minority Media Association. Since 2000, She has worn many hats with this organization. She was the Recording Secretary, Publicist, and National Newsletter/Magazine Editor of UMMA Media News for the United Minority Media Association. She also serves on the Time Well Spent Committee and UMMA KC Watch and is working with our web developer for the ummahqkc1.org website. Ruby has a Bachelor’s in Communications and a Master of Liberal Arts degree. While working on her undergraduate degree, she interned as the Assistant Producer for the Walt Bodine Show, KCUR 89.3 AM, and as production interns for KKFI 90.1 FM and Kansas City Public Television station where she worked closely with Nick Haines, Executive Producer of Public Affairs/News. lt;/divgt; lt;/divgt; lt;/divgt; lt;h2gt;Ruby Watson, Interim Vice President of Communicationslt;/h2gt; lt;/articlegt;