ある要素にopacityをかけるとき、親要素が見えないようにするには(HTML)

###問題
ある要素の背景を透明化した時、親要素がみえないようにする方法が知りたいです。。
front.jogにopacityをかけているのですがback.jpgがすけてみえてしまいます。すけて見えるのが一番うしろの親要素のbodyだけにしたいのです。つまり下記の状態で言えば背景の白です。
bodyがグラデーション、透明などのときも対応したいです

html
1<!DOCTYPE html>
2<html lang="ja" >
3<head>
4<meta charset="utf-8">
5<script type="text/javascript" src="frame/jquery-3.1.1.min.js"></script>
6<style>
7img{
8    position:absolute;
9}
10img:nth-child(2){
11    opacity:0.8;
12}
13</style>
14</head>
15<body>
16    <img src="back.jpg" alt="">
17    <img src="front.jpg" alt="">
18<script>
19
20</script>
21</body>
22</html>
23

T_sa

2016/12/02 02:21

透けて見えるのがbodyということは、back.jpgもfront.jpgも透過させたいということでしょうか？

行動規範の内容に同意します

回答2件

そのままの構造だと要望通りにするのは難しいです。

frontの画像をdivで囲う。
囲ったdivに対して、一番後ろの背景色と同じ色（今回の場合は白）を指定する。

以上のような形で、下の画像が透けないようにすることは出来ます。

css
1.image {
2    position:absolute;
3}
4.front-wrap {
5  background-color: #FFF;
6}
7.front {
8    opacity:0.8;
9}

html
1<div class="image">
2  <img src="back.jpg" alt="">
3</div>
4<div class="image front-wrap">
5  <img src="front.jpg" alt="" class="front">
6</div>

投稿2016/12/01 10:48

yamato_hikawa

総合スコア2092

退会済みユーザー

2016/12/01 11:20

確かに、上の質問の場合いけるのですが。bodyにグラデーションをかけているときや、bodyが透過している場合などがそのやり方ではできないとおもいます。質問が情報不足でしたm(_ _)m

yamato_hikawa

2016/12/01 14:23 編集

imageを囲うdivを2層にして対応すればある程度はできます。最下層の背景と同じグラデーションをかけたり透過させたdivに、もう1つdivを囲って白を指定します。しかし、基本的に3枚重ねの2枚目を無視して最下層を表示させようとするアプローチ自体に無理があるので、もっと別の見せ方を考えた方がいい気がします。無理やりやるのであれば、画像処理ソフトで、背景画像をくり抜いて最前面の画像に重なる部分を透過状態にしておくのが一番手っ取り早そうです。

行動規範の内容に同意します

displaynone使って見えなくしちゃうのは駄目でしょうか。。
画像はダミーで入れています。

html
1<div class="mask">
2  <img src="http://placehold.it/280x200" alt="">
3  <span class="opacityimage"></span>
4</div>
5

css
1.mask {
2  opacity: .8;
3}
4
5.mask img {
6  display: none;
7}
8
9.mask .opacityimage {
10  display: block;
11  width: 1000px;
12  height: 200px;
13  background: url(http://placehold.it/1000x200);
14}
15