1

Есть блок с засветленной картинкой и обычным текстом на ней, так же с верху и снизу есть обрамление картинки в виде треугольников. Но при задании 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>

5
  • 1
    не opacity а rgba цвет , opacity наследуется
    – user33274
    11 мая 2016 в 6:32
  • это работает если на фоне просто цвет, а если картинка, то rgba никак не помогает 11 мая 2016 в 6:47
  • ну тогда filter надо применять , но не opacity -
    – user33274
    11 мая 2016 в 6:50
  • можно по подробнее про filter? Насколько я знаю, они устарели и не поддерживаются современными браузерами 11 мая 2016 в 6:58
  • заходи - я по пробую там про объяснить jsfiddle.net/p549mrkb/#&togetherjs=4UsRzudrHM
    – user33274
    11 мая 2016 в 7:00

1 ответ 1

1

.parent{
  width:390px;
  height:440px;
  position:relative;
  margin:auto;
  border:4px solid #cc0000;
}
.child_1,.child_2{
  width:390px;
  height:220px;
}
.child_1 img{ 
 opacity:;
 }
.child_2 img{ 
  opacity:;
}
<div class="parent"> 
   <div class="child_1"> 
    <img src="http://www.wwalls.ru/mini/201211/54207.jpg" />
   </div>
   <div class="child_2"> 
      <img src="http://www.wwalls.ru/mini/201211/54207.jpg" />
   </div>
</div>
только так

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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