#html #css
#HTML #css
Вопрос:
Как я могу поместить изображение, которое у меня есть, за изогнутым заголовком? У меня уже есть изогнутый заголовок, но я просто не знаю, как я могу поместить на него изображение.
body {
margin: 0;
padding: 0;
}
section {
position: relative;
width: 100%;
height: 80vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
section:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
background: #333333;
border-radius: 0 0 60% 60%/ 0 0 50% 50%;
border-bottom: #FF0000 20px solid;
}
section .content {
position: relative;
z-index: 1;
margin: 0 auto;
max-width: 900px;
text-align: left;
}
section .content p {
color: #fff;
font-size: 1.2em;
}
section .content h2 {
color: #fff;
font-size: 3em;
} <body>
<section>
<div class="content">
<h2>WELCOME!</h2>
<p>We know you want a job where you can perform at the highest level. </p>
<p>That’s why we created the Global English Assessment, so you know how you can evolve your communication skills to increase your compensation and success at ePerformax.</p>
<p>This assessment will give you a plan to be your best and meet your goals.</p>
<p>Click Continue to get started.</p>
</div>
</section>
</body> Кто-нибудь может мне помочь в том, как получить фактическое изображение, которое у меня есть, любая помощь была бы очень признательна.
Ответ №1:
Я думаю, вы можете попробовать использовать свойство CSS z-index для оформления некоторого слоя в вашем коде.
Например, вы можете присвоить своему изогнутому заголовку больший z-индекс, чем тот, который вы присвоите своему изображению (или элементу, который имеет его в качестве фона, если это так): это заставит ваш заголовок появляться над изображением.
Вот некоторая информация об этом свойстве на сайте школы W3C.
Ответ №2:
Я добавил изображение в контейнер .. возможно, с именем класса image в контейнере раздела и играет с абсолютной позицией для изображения :
Я поместил пример кода здесь
body{
margin: 0;
padding: 0;
}
section{
position: relative;
width: 100%;
height: 80vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.image {
display: block;
width: 400px;
height: 400px;
-webkit-border-radius: 400px;
-moz-border-radius: 400px;
border-radius: 400px;
position: absolute;
top: 0;
left: 0;
z-index:5
}
.image img {
border-radius:600px;
}
section:before{
content: '';
position: absolute;
top: 0;
left: 50px;
width: 100%;
height: 100%;
background: #000;
background: #333333;
border-radius: 0 0 60% 60%/ 0 0 50% 50%;
border-bottom: #FF0000 20px solid;
}
section .content{
position: relative;
z-index: 1;
margin: 0 auto;
max-width: 900px;
text-align: left;
}
section .content p{
color:#fff;
font-size: 1.2em;
}
section .content h2{
color:#fff;
font-size: 3em;
} <!DOCTYPE html>
<html>
<head>
<title>Simple Login System in Laravel</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<section>
<div class="content">
<h2>WELCOME!</h2>
<p>We know you want a job where you can perform at the highest level. </p>
<p>That’s why we created the Global English Assessment, so you know how you can evolve your communication skills to increase your compensation and success at ePerformax.</p>
<p>This assessment will give you a plan to be your best and meet your goals.</p>
<p>Click Continue to get started.</p>
</div>
<span class="image">
<img src="http://lorempixel.com/400/400/sports/1/" alt="">
</span>
</section>
</body>
</html> Ответ №3:
<!DOCTYPE html>
<html>
<head>
<style>
.header{
width: 100%;
height: 600px;
background-color: #bbb;
border-radius: 0px 0px 50% 50%;
position: relative;
z-index: 9;
top: 100px;
}
.header__overlay{
position: absolute;
width: 100%;
height: 600px;
background-color: #bbb;
border-radius: 0px 0px 50% 50%;
background-color: green;
top: -30px;
overflow: hidden;
}
.header__img{
width: 100%;
height: 100%;
object-fit: cover;
}
.header__content{
position: absolute;
z-index: 9;
bottom: 203px;
left: 0;
padding: 21px;
background-color: #ffffff6e;
}
</style>
</head>
<body>
<div class="header">
<div class="header__overlay">
<img class="header__img" src="https://myoffices.com/code/images/pictures/5.jpg"/>
<div class="header__content">
<h2>WELCOME!</h2>
<p>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
</div>
</div>
</div>
</body>
</html>