Есть блок с засветленной картинкой и обычным текстом на ней, так же с верху и снизу есть обрамление картинки в виде треугольников. Но при задании opacity
засветляются и треугольники. Пытался ставить эту рамку как background-image
основного блока, но эффект один и тот же
main .about .about_jovi {
display: flex;
flex-direction: column;
justify-content: center;
height: 600px;
width: 100%;
position: relative;
background-color: #FFCCCC;
z-index: 0;
}
main .about .about_jovi .jovi_img {
height: 600px;
width: 100%;
background-attachment: local, local, local, local, fixed;
background-image: linear-gradient(320deg, #fffbf2 10px, transparent 11px), linear-gradient(40deg, #fffbf2 10px, transparent 11px), linear-gradient(40deg, transparent 10px, #fffbf2 11px), linear-gradient(320deg, transparent 10px, #fffbf2 11px), url(http://cs5.pikabu.ru/post_img/big/2015/12/20/5/1450595196112767954.jpg);
background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
background-size: 15px 15px, 15px 15px, 15px 15px, 15px 15px, 100% 100%;
background-position: bottom, bottom, top, top;
opacity: .6;
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
main .about .about_jovi h1 {
font-family: master-of-break;
font-size: 51px;
text-align: center;
padding: 0 15px;
line-height: 90px;
}
main .about .about_jovi p {
font-family: bell;
font-size: 30px;
text-align: right;
padding: 0 170px 0 0;
}
<div class="about_jovi">
<div class="jovi_img"></div>
<h1>There`s a vintage which comes with ages and experience.</h1>
<p>Jon Bon Jovi</p>
</div>