Что делать со стилем?
Здравствуйте. Создал блок партнеров на белом фоне, а он появляется с затемненным вариантом. Изображения тоже затемняются. Пробовал работать с .overlay, но он составляет основу эффектов для фона и никак не могу подобрать нужный эффект. С #infobox цвета прекрасно отображаются.
код
<!DOCTYPE html> <html> <head> <title>MFS Group</title> <script> document.addEventListener("DOMContentLoaded", function(event) { var titles = [ "Доверьте свою поддержку профессионалам MFS!", "Мощная поддержка для вашего игрового мира!", "Надежная техподдержка для вашей мультиплеерной жизни в GTA 5!", "MFS - твоя техподдержка в GTA 5!", "MFS Group", ]; var index = 0; var titleElement = document.getElementById("title"); setInterval(function() { document.title = titles[index]; index = (index + 1) % titles.length; }, 3000); var navigation = document.querySelector(".navigation"); setTimeout(function() { navigation.classList.add("visible"); }, 500); }); </script> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <style> body { margin: 0; padding: 0; overflow: hidden; } .background-image { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0.5; pointer-events: none; } .content { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100vh; } .navigation { position: fixed; top: -3px; right: 20px; opacity: 0; transition: top 1s ease-in-out, opacity 0.5s ease-in-out; } .navigation.visible { top: 20px; opacity: 1; } .navigation ul { list-style-type: none; margin: 0; padding: 0; } .navigation li { display: inline-block; margin-left: 10px; } .navigation a { text-decoration: none; color: #ffffff; font-family: 'Roboto Mono', monospace; font-size: 18px; padding: 5px 10px; border-radius: 5px; background-color: rgba(255, 255, 255, 0.2); transition: background-color 0.3s ease; } .navigation a:hover { background-color: rgba(255, 255, 255, 0.4); } body { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 540px; } #infobox { margin-bottom: 40px; font-family: 'Roboto', sans-serif; opacity: 0; width: 960px; padding: 20px; border-radius: 10px; background-color: white; box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2); animation: fade-in 1s ease-out forwards; } p { font-size: 16px; text-align: left; } h1 { font-size: 40px; text-align: center; } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } .sponsor-block { text-align: center; margin-top: 40px; } .sponsor-container { background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2); margin-top: 40px; display: inline-block; } .sponsor-block h2 { font-size: 24px; } .sponsor-block ul { list-style-type: none; padding: 0; margin-top: 20px; } .sponsor-block li { display: inline-block; margin: 0 10px; } .sponsor-block img { width: 100px; height: 100px; object-fit: cover; border-radius: 50%; opacity: 1; } body { position: relative; min-height: 100vh; margin: 0; padding-bottom: 5px; } .footer { font-family: 'Roboto Mono', monospace; position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; padding: 20px; color: #fff; font-size: 14px; } </style> </head> <body> <img class="background-image" src="img/background.jpg" alt="Фоновое изображение"> <div class="overlay"></div> <nav class="navigation"> <ul> <li><a href="main.html">ГЛАВНАЯ</a></li> <li><a href="info.html">О НАС</a></li> <li><a href="partner.html">ПАРТНЕРСТВО</a></li> <li><a href="#contact">МЕДИА</a></li> </ul> </nav> <div id="infobox"> <h1>ПОЧЕМУ ИМЕННО МЫ?</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> <div class="sponsor-container"> <div class="sponsor-block"> <ul> <li> <a href="https://rage.mp" target="_blank"> <img src="img/partners/Stoum.png" alt="Спонсор 1"> </a> </li> <li> <a href="https://rage.mp" target="_blank"> <img src="img/partners/Stoum.png" alt="Спонсор 2"> </a> </li> <li> <a href="https://rage.mp" target="_blank"> <img src="img/partners/Stoum.png" alt="Спонсор 3"> </a> </li> </ul> </div> </div> <script> window.addEventListener('DOMContentLoaded', function() { setTimeout(function() { document.getElementById("infobox").style.opacity = "1"; }, 1000); }); </script> <div class="footer"> Создано командой MultiFiveSupport Group<br>© 2023 </div> </body> </html> |
<!DOCTYPE html> <html> <head> <title>MFS Group</title> <script> document.addEventListener("DOMContentLoaded", function(event) { var titles = [ "Доверьте свою поддержку профессионалам MFS!", "Мощная поддержка для вашего игрового мира!", "Надежная техподдержка для вашей мультиплеерной жизни в GTA 5!", "MFS - твоя техподдержка в GTA 5!", "MFS Group", ]; var index = 0; var titleElement = document.getElementById("title"); setInterval(function() { document.title = titles[index]; index = (index + 1) % titles.length; }, 3000); var navigation = document.querySelector(".navigation"); setTimeout(function() { navigation.classList.add("visible"); }, 500); }); </script> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <style> body { margin: 0; padding: 0; overflow: hidden; } .background-image { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0.5; pointer-events: none; } .content { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100vh; } .navigation { position: fixed; top: -3px; right: 20px; opacity: 0; transition: top 1s ease-in-out, opacity 0.5s ease-in-out; } .navigation.visible { top: 20px; opacity: 1; } .navigation ul { list-style-type: none; margin: 0; padding: 0; } .navigation li { display: inline-block; margin-left: 10px; } .navigation a { text-decoration: none; color: #ffffff; font-family: 'Roboto Mono', monospace; font-size: 18px; padding: 5px 10px; border-radius: 5px; background-color: rgba(255, 255, 255, 0.2); transition: background-color 0.3s ease; } .navigation a:hover { background-color: rgba(255, 255, 255, 0.4); } body { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 540px; } #infobox { margin-bottom: 40px; font-family: 'Roboto', sans-serif; opacity: 0; width: 960px; padding: 20px; border-radius: 10px; background-color: white; box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2); animation: fade-in 1s ease-out forwards; } p { font-size: 16px; text-align: left; } h1 { font-size: 40px; text-align: center; } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } .sponsor-block { text-align: center; margin-top: 40px; } .sponsor-container { background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2); margin-top: 40px; display: inline-block; } .sponsor-block h2 { font-size: 24px; } .sponsor-block ul { list-style-type: none; padding: 0; margin-top: 20px; } .sponsor-block li { display: inline-block; margin: 0 10px; } .sponsor-block img { width: 100px; height: 100px; object-fit: cover; border-radius: 50%; opacity: 1; } body { position: relative; min-height: 100vh; margin: 0; padding-bottom: 5px; } .footer { font-family: 'Roboto Mono', monospace; position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; padding: 20px; color: #fff; font-size: 14px; } </style> </head> <body> <img class="background-image" src="img/background.jpg" alt="Фоновое изображение"> <div class="overlay"></div> <nav class="navigation"> <ul> <li><a href="main.html">ГЛАВНАЯ</a></li> <li><a href="info.html">О НАС</a></li> <li><a href="partner.html">ПАРТНЕРСТВО</a></li> <li><a href="#contact">МЕДИА</a></li> </ul> </nav> <div id="infobox"> <h1>ПОЧЕМУ ИМЕННО МЫ?</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> <div class="sponsor-container"> <div class="sponsor-block"> <ul> <li> <a href="https://rage.mp" target="_blank"> <img src="img/partners/Stoum.png" alt="Спонсор 1"> </a> </li> <li> <a href="https://rage.mp" target="_blank"> <img src="img/partners/Stoum.png" alt="Спонсор 2"> </a> </li> <li> <a href="https://rage.mp" target="_blank"> <img src="img/partners/Stoum.png" alt="Спонсор 3"> </a> </li> </ul> </div> </div> <script> window.addEventListener('DOMContentLoaded', function() { setTimeout(function() { document.getElementById("infobox").style.opacity = "1"; }, 1000); }); </script> <div class="footer"> Создано командой MultiFiveSupport Group<br>© 2023 </div> </body> </html>
Дополнительно:
Почитайте про позиционирование и z-index
Ответ прост: будьте внимательнее и не забывайте про позиционирование и z-index. Спасибо комментарию)
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для изменения стиля элементов на веб-странице вам необходимо использовать CSS (каскадные таблицы стилей). CSS позволяет управлять внешним видом элементов HTML, такими как цвет текста, размер шрифта, отступы, рамки, и многое другое.
Для того чтобы применить стили к элементам на вашей веб-странице, вам необходимо создать правила CSS. Эти правила могут быть встроенными (напрямую в HTML документе), внутренними (в теге `` внутри ``), или внешними (в отдельном CSS файле, который подключается к HTML документу с помощью тега ``).
Пример использования CSS для изменения стиля элементов на веб-странице:
/* Внутренние стили */ h1 { color: red; font-size: 24px; } p { font-family: Arial, sans-serif; } /* Внешние стили */ /* Стили внутри HTML элемента */ <div style="background-color: #f0f0f0;padding: 10px"> <p>Это текст с примененным стилем внутри HTML элемента</p> </div>
Чтобы применить стили к элементам на вашей веб-странице, укажите селектор (например, `h1` для заголовков первого уровня), а затем в фигурных скобках укажите свойства стиля и их значения (например, `color: red;` для изменения цвета текста).
Таким образом, чтобы изменить стиль элементов на вашей веб-странице, используйте CSS и определите необходимые правила стиля для каждого элемента, который вы хотите изменить.