1

Добрый день! Есть блок в котором по средствам postion absolute накладываются картинки. Помогите сделать прозрачной только одну картинку. Я пробовал и так и сяк и всё ровно у меня становится прозрачным всё...

Присваивал ID и классы и ничего не выходит, не понимаю вообще как так то.

.browseBlock {
  position: relative;
  width: 300px;
  height: 300px;
}

.browseBlock img {
  width: 300px;
  height: 300px;
}

.ono {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
}

.ono img {
  width: 100px;
  height: 100px;
}
<div class="browseBlock">
  <div class="ono">
    <img src="http://logotipka.ru/images/stories/skachat_img/icons/icons4.jpg" title="" alt="">
  </div>

  <img style="opacity: 0.5" class="glavn" src="http://logotipka.ru/images/stories/Skachat_new_year/new_year55.jpg" title="" alt="">

</div>

2

2 ответа 2

1

body {
  background: #272727;
}

.browseBlock {
  position: relative;
  width: 300px;
  height: 300px;
}

.browseBlock>img {
  position: absolute;
  z-index: -1;
}

.ono {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
}

.ono img {
  opacity: 0.5;
}
<div class="browseBlock">
  <div class="ono">
    <img src="http://via.placeholder.com/300x300/ff9900/555555?text=Foto-1">
  </div>
  <img class="glavn" src="http://via.placeholder.com/100x100/33ff99/555555?text=Foto-2">
</div>

0

Если вы имеете ввиду, что прозрачным становится

<div class="ono">
    <img src="http://logotipka.ru/images/stories/skachat_img/icons/icons4.jpg" title="" alt="">
</div>

то добавьте в

.ono {z-index: 10;}

Ваш ответ

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

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