Вопросы Теги

Помещать изображение над элементом

Это результат, который я приношу до настоящего времени:

vista del html

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

Это мой код:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif;
  color: #ffffff;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
}

.container {
  height: 95vh;
}

.header {
  background-image: linear-gradient(to right bottom, rgb(97, 166, 14, .7), rgb(0, 73, 135, .7));
  /*url(img/fondo.jpg);*/
  background-size: cover;
  background-position: top;
  clip-path: polygon(0 0, 100% 0, 100% 60%, 0 100%);
}

.header .logo-box img {
  height: 5vh;
}

.imagen-data .img-data {
  max-width: 100%;
}

.data-planning {
  text-align: center;
}
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- fonts -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800&display=swap" rel="stylesheet">

  <!-- css -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="estilos.css">
  <title>Data Planning</title>
</head>

<body>
  <header class="header">
    <div class="container">
      <div class="row d-flex align-items-center mt-4">
        <div class="col-4 data-planning">
          <h1>Data Planning</h1>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde, totam?.</p>
          <button type="button" class="btn btn-primary">Empezemos</button>
        </div>
        <div class="col-8 imagen-data">
          <img src="https://placehold.it/400x400" alt="data" class="img-data">
        </div>
      </div>
    </div>
  </header>
</body>

</html>
6
задан 13.08.2019, 17:43
0 ответов