HTML5 и CSS заголовок изображения баннера и выравнивание текста - PullRequest
Новая
       15

HTML5 и CSS заголовок изображения баннера и выравнивание текста

0 голосов
/ 20 февраля 2019

Я пытался поместить изображение баннера за текстом в верхнем заголовке, но форматирование просто не сработало.Я также попробовал background-image: url(/imgs/header_pic.jpg); в таблице стилей, но таким образом она даже не отображается.В настоящее время он обнаруживается, что позади текста изображение не может быть отцентрировано или изменено для максимальной высоты, и навигация (элементы списка) также накладываются на изображение. 

div#header-background {
  position: absolute;
  max-height: 4em;
  z-index: -1;
  border-radius: 10%;
  opacity: 0.25;
}

h1#header-text {
  position: relative;
  top: 0;
  text-align: center;
  font-size: 3em;
}
<body>
  <header>
    <div id="header-background"><img src="imgs/header_pic.jpg"></div>
    <h1 id="header-text">John Doe</h1>
  </header>
  <nav>
    <ul style="list-style-type: none">
      <li><a href="index.html">Main</a></li>
      <li><a href="about.html">about</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
  <main></main>
  <footer></footer>
</body>

ОБНОВЛЕНИЕ: После проверки ответов (спасибо!).Я провел небольшое исследование и изменил его в следующем коде.Теперь мне нужно только переместить текст вертикально в центр, потому что он странно не идеально отцентрирован, но немного смещен.Что вы, ребята, думаете? 

header{
    width: 100%;
    height: 12em;
    position: relative;
  }

h1#header-text{
    position: absolute;
    z-index:999;
    text-align: center;
    font-size: 3em;
    width: 100%;
    height: 100%;
  }
  
header:after{
    content: "";
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    background-image: url(imgs/header.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.25;
  }

Ответы [ 3 ]

0 голосов
/ 20 февраля 2019

Я новичок в веб-дизайне, но я хотел бы помочь вам решить вашу проблему, если смогу.Я считаю, что ваша проблема в том, что вы не определили размер изображения.Я скопировал ваш код и введенные значения ширины и высоты для изображения, и это сработало для меня.

0 голосов
/ 20 февраля 2019 
div#header-background {
  background-image:url('imgs/header_pic.jpg');
  background-size:cover;
  opacity: 0.25;
}
h1#header-text{
  text-align:center;
}
ui li{
  text-decoration:non;
  display:block;
}

<body>
  <header id="header-background">
    <h1 id="header-text">John Doe</h1>
  </header>
  <nav>
    <ul>
      <li><a href="index.html">Main</a></li>
      <li><a href="about.html">about</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
  <main></main>
  <footer></footer>
</body>
0 голосов
/ 20 февраля 2019

Как вы сейчас делаете, вы можете скрыть переполнение, добавив это в свой CSS: 

div#header-background{
    position: absolute;
    max-height: 4em;
    z-index: -1;
    border-radius: 10%;
    opacity: 0.25;
    overflow: hidden;
}

https://jsfiddle.net/f0xwbq73/2/

Чтобы применить background-image, вы можетесделать это так: 

header{
    background-image: url('https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

h1#header-text{ 
    position: relative;
    top: 0;
    text-align: center;
    font-size: 3em;
}
<body>
<header>
    <h1 id="header-text">John Doe</h1>
</header>
    <nav>
       <ul style="list-style-type: none">
          <li><a href="index.html">Main</a></li>
          <li><a href="about.html">about</a></li>
          <li><a href="contact.html">Contact</a></li>
       </ul>
    </nav>
    <main></main>
    <footer></footer>
</body>

Однако вы не сможете контролировать непрозрачность изображения с помощью CSS, поэтому вам придется делать это через Photoshop или другое изображение.редактор.

https://jsfiddle.net/5g1zjLhw/

Вы можете проверить https://www.w3schools.com/cssref/pr_background-image.asp для получения дополнительной информации о позиционировании / размере.

...