Блог

Главная - Вопросы по программированию - Как я могу переместить абзац ниже фона?

Как я могу переместить абзац ниже фона?

#html #css #paragraph

#HTML #css #абзац

Вопрос:

У меня скоро должно быть задание по веб-разработке. Мне действительно нужна помощь в размещении абзаца с информацией о курсе под неповторяющимся фоном. Я не хочу, чтобы это было на тех же двух фотографиях, на которых есть название Computer Engineering. Кроме того, как я могу изменить его шрифт? Буду признателен за любую помощь :). Это должно произойти очень скоро.

 body,
html {
  height: 100%;
  margin: 0;
  font-size: 16px;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  line-height: 1.8em;
}

.jumbotron {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url(image.jpg);
  background-position: 0% 25%;
  background-size: cover;
  background-repeat: no-repeat;
  border: 2px;
}

.navigation {
  background-color: #330;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto auto auto auto auto;
}

.navigation a {
  font-size: 20px;
  text-decoration: none;
  color: #f2f2f2;
  text-align: center;
  float: left;
}

.navigation a:hover {
  background-color: #dddddd;
  color: black;
}

.navigation a.active {
  background-color: #4CAF50;
  color: white;
}

body {
  background-image: url("Engineering.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-color: rgba(0, 0, 0, 0.5);
}

h1 {
  margin: auto;
  z-index: 4;
  text-align: center;
  width: 100%;
  color: white;
  font-size: 100px;
  padding: 10px;
  line-height: 1.8em;
}

.courseinfo {}  
 <!DOCTYPE html>
<html>

<head>

  <title>
    Home - Hasan's Website
  </title>
</head>

<body>
  <div class="navigation">
    <a class="active" href="#home">Home</a>
    <a href="#aboutMe">About Me</a>
    <a href="#careers">Careers</a>
    <a href="#contactUs">Contact Us</a>
    <a href="#webDev">Web Development</a>
  </div>

  <div class="intro">
    <div class="jumbotron">
      <h1>Computer Engineering</h1>

    </div>


  </div>

  <div class="courseinfo">
    <p>This course examines computer systems and control of external devices. Students will develop knowledge and skills in electronics, interfacing, programming, and networks, will build systems that use computer programs and interfaces to control and respond
      to external devices. Students will develop an awareness of related environmental and societal issues, and will learn about college and university programs leading to careers in computer technology.</p>

  </div>





</body>

</html>

Комментарии:

1. при добавлении position:absolute это приведет к тому, что элемент ниже будет находиться за этим конкретным element , просто удалите position:absolute from it

2. Я удалил position: absolute, и это заставило заголовок Computer Engineering переместиться в угол.

3. Есть другие идеи?

4. Можете ли вы добавить скриншот окончательного требования?

5. Позвольте мне попробовать ….. gyazo.com/58954bbc04aa47a793536e62ec021677 Я отправил спам <br> в коде, чтобы получить это представление.

Ответ №1:

Это так, как вы хотите .. удалено position:absolute и transform: translate(-50%, -50%); добавлено фоновое изображение в .intro 

 body,
html {
  height: 100%;
  margin: 0;
  font-size: 16px;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  line-height: 1.8em;
}

.jumbotron {
  top: 50%;
  left: 50%;
  background-image: url(image.jpg);
  background-position: 0% 25%;
  background-size: cover;
  background-repeat: no-repeat;
  border: 2px;
}

.navigation {
  background-color: #330;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto auto auto auto auto;
}

.navigation a {
  font-size: 20px;
  text-decoration: none;
  color: #f2f2f2;
  text-align: center;
  float: left;
}

.navigation a:hover {
  background-color: #dddddd;
  color: black;
}

.navigation a.active {
  background-color: #4CAF50;
  color: white;
}

.intro {
  background-image: url("Engineering.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-color: rgba(0, 0, 0, 0.5);
  height: 90vh;
  display: flex;
  align-items: center;
}

h1 {
  margin: auto;
  z-index: 4;
  text-align: center;
  width: 100%;
  color: white;
  font-size: 100px;
  padding: 10px;
  line-height: 1.8em;
}

.courseinfo {}  
 <!DOCTYPE html>
<html>

<head>

  <title>
    Home - Hasan's Website
  </title>
</head>

<body>
  <div class="navigation">
    <a class="active" href="#home">Home</a>
    <a href="#aboutMe">About Me</a>
    <a href="#careers">Careers</a>
    <a href="#contactUs">Contact Us</a>
    <a href="#webDev">Web Development</a>
  </div>

  <div class="intro">
    <div class="jumbotron">
      <h1>Computer Engineering</h1>
    </div>
  </div>

  <div class="courseinfo">
    <p>This course examines computer systems and control of external devices. Students will develop knowledge and skills in electronics, interfacing, programming, and networks, will build systems that use computer programs and interfaces to control and respond
      to external devices. Students will develop an awareness of related environmental and societal issues, and will learn about college and university programs leading to careers in computer technology.</p>

  </div>





</body>

</html>

Комментарии:

1. Вы были близки. Я хочу, чтобы в текущем фоне было «Компьютерная инженерия». Абзац должен находиться под фоном, где фона нет.

2. @John Bob проверь сейчас. я обновил свой ответ. Спасибо

3. Извините, я просто избавился от большого фона и переместил все наверх.

4. вы не совсем понимаете, чего хотите.. пожалуйста, добавьте скриншот

5. Конечно. gyazo.com/ded725b3b25947f362af087f62885e3d Мне нужен текст под фоном, чтобы я мог прокрутить его вниз.