主页 / 问题 / 737420
Accepted
Vladik
Asked:2020-10-29 21:01:40 +0000 UTC2020-10-29 21:01:40 +0000 UTC

帮助在 css 块中仅使一张图像透明

  • 772

下午好！有一个块，其中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>

html

2 个回答

  1. Best Answer

    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>

    • 1

  2. 如果你的意思是透明

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

    然后添加到

    .ono {z-index: 10;}
    • 0

相关问题