0

У меня проблема, надо поместить текст на картинку, подскажите пожалуйста, как это сделать. Надо

CONQUER

Simple Bootstrap Template наложить на картинку.

html {
  width: 100%;
  height: 100%;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: "Open Sans", Helvetica, Arial, sans-serif!important;
}

body {
  overflow-x: hidden;
}

ul.nav {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  height: 70px;
}

.navbar .navbar-nav {
  display: inline-block;
  float: none;
}

ul.nav li {
  width: 140px;
  margin-top: 5px;
  display: inline;
  /* Отображать как строчный элемент */
  margin-right: 15px;
  /* Отступ слева */
  border: 1px solid #000;
  /* Рамка вокруг текста */
}

li:after {
  background-color: #49505F
}

.nav a {
  text-align: center;
  font-size: 20px;
  line-height: 20px;
  font-family: sans-serif;
  text-decoration: none;
  color: white;
  display: inline-block;
  padding: 10px 20px;
  background-color: #383E4C;
  border: 1px solid #646D7C;
}

.navbar {
  background-color: #383E4C;
  margin: 0;
}

img {
  width: 100%;
  height: 100%;
}
<div class="header">
  <nav class="navbar">
    <ul class="nav navbar-nav">
      <li><a href="section1">Homepage</a></li>
      <li><a href="section2">About Us</a></li>
      <li><a href="section3">Services</a></li>
      <li><a href="section4">Contact</a></li>
      <li><a href="section5">External</a></li>
    </ul>
  </nav>
</div>

<div class="content">
  <div class="img">
    <img src="img/bg-1.jpg" alt="#">
    <h1>CONQUER</h1>
    <h4>Simple Bootstrap Template</h4>
  </div>
  <div class="slide-content">
    <div class="bootstrap"></div>
    <div class="responsive-design"></div>
    <div class="parallax-layout"></div>
  </div>
</div>

1
  • 1
    картинку может проще как background поставить у дива, а внутри уже текст размещать
    – SnakeMS
    15 фев 2019 в 19:33

1 ответ 1

1

В общем здесь смысл в абсолютном позиционировании а всё остальное в моём случае просто оформление ...

Делаем некий контейнер и говорим что относительно него будем располагать ваше меню и эту надпись ...т.е пишем в css для .container{position:relative;} а меню и надпись располагаем абсолютно т.е position:absolute

Смотрим пример на полную страницу

@import url('https://fonts.googleapis.com/css?family=Hanalei+Fill|Righteous');
* {
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

html,
body {
  margin: 0;
  padding: 0;
}

img {
  display: block;
  width: 100%;
}

.container {
  position: relative;
}

.title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3.2em;
  text-transform: uppercase;
  font-family: 'Hanalei Fill', cursive;
  color: #00ffff;
  font-weight: 900;
  background: rgba(16, 25, 34, 0.7);
  padding: 10px 20px;
}

ul {
  display: flex;
  background: rgba(16, 25, 34, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
}

ul li {
  padding: 1vh 2vw;
}

ul li a {
  font-family: 'Righteous', cursive;
  font-size: 1.2em;
  font-variant: small-caps;
  color: #00ffff;
}
<div class="container">
  <ul>
    <li><a href="">home page</a></li>
    <li><a href="">about us</a></li>
    <li><a href="">services</a></li>
    <li><a href="">contacts</a></li>
    <li><a href="">exteernal</a></li>
  </ul>
  <div class="img">
    <img src="https://i.stack.imgur.com/Vo2tU.jpg" alt="">
  </div>
  <div class="title">
    future metro
  </div>
</div>

1
  • Благодарю за помощь, помогло, теперь разобрался.
    – kldd0
    19 фев 2019 в 17:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.