Я хочу, чтобы изображение было выровнено по левому краю с текстом в тегах <h1> ниже, но я не могу найти решение - PullRequest
Новая
       5

Я хочу, чтобы изображение было выровнено по левому краю с текстом в тегах <h1> ниже, но я не могу найти решение

0 голосов
/ 03 марта 2020

Мне нужно, чтобы второе изображение было выровнено по левому краю текста, но наложено поверх фонового изображения. У меня возникли проблемы с выяснением того, что css мне нужно, чтобы заставить эту работу. В настоящее время все, что я пробовал, портит расположение текста или фоновое изображение.

К счастью, это личный проект, поэтому нет графика, но я был бы признателен за любую помощь, которая могла бы быть оказана.

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

.hero-full-container {
    height: 100vh;
    position: relative
}

.background-image-container {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%
}

.white-text-container h1 {
    color: #fff
}

.overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .3), transparent);
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, .3) 0, transparent 100%);
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .3) 0, transparent);
    background-repeat: repeat-x;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#4D000000", endColorstr="#00000000", GradientType=0)
}

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px
}

.row {
    margin-left: -15px;
    margin-right: -15px
}

.col-xs-12 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px
}

 .col-md-7 {
        width: 58.33333%
}

 .col-md-offset-1 {
        margin-left: 8.33333%
}

.hero-full-wrapper .text-content {
    padding-top: 30%
}

<div class="hero-full-container background-image-container white-text-container" style="background-image:url('./assets/images/home_01.jpg')">
  <div class="overlay-gradient"></div>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-md-7 col-md-offset-1">
        <div class="hero-full-wrapper">
          <div class="text-content">
            <h1>William</h1>
            <h1>Mark</h1>
            <h1>Derichsweiler</h1>
            <!--<p>Lorem ipsum</p>-->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 03 марта 2020

Я не очень хорошо понимаю ваш вопрос, но если вы хотите иметь фоновое изображение и другое изображение над этим изображением, вы можете сделать это, создав больше div. После того, как вы вставите фоновое изображение, вы можете вставить еще один div внутри этого div, например: 

<div class="main-container">
    <div class="second-image">
        <img src="link_to_your_image">
    </div>
    <div class="text-area">
        <h1>William</h1>
        <h1>Mark</h1>
        <h1>Derichsweiler</h1>
    </div>
</div>

и для css, вы можете использовать свойство flex, задав направление flex-direction: row, Например: 

*{
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

.main-container {
    width: 100%;
    height: 100%;
    background-image: url('link_to_your_image');
    background-color: red;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.second-image, .text-area {
    margin-left: 50px;
}

Надеюсь, это поможет вам, хорошего дня.

...