javascriptでのpng透過画像のスクロールと同時にフェードインするやり方。

javascript
1<script src="test/js/scrollreveal.js"></script>
2<script>
3window.sr = ScrollReveal({ reset: true });
4
5// Distance
6sr.reveal('.distanceHundred', { distance: "500px", origin: "left" });
7// Distance
8sr.reveal('.distanceHundred2', { distance: "500px", origin: "left", delay: "100"})
9// Distance
10sr.reveal('.distanceHundred3', { distance: "500px", origin: "left", delay: "200"})
11// Distance
12sr.reveal('.distanceHundred4', { distance: "500px", origin: "left", delay: "300"})
13// Distance
14sr.reveal('.distanceHundred5', { distance: "500px", origin: "left", delay: "400"})
15// Distance
16sr.reveal('.distanceHundred6', { distance: "500px", origin: "left", delay: "460"})
17// Distance
18sr.reveal('.distanceHundred7', { distance: "500px", origin: "left", delay: "600"})
19// Distance
20sr.reveal('.distanceHundred8', { distance: "500px", origin: "left", delay: "710"})
21// Distance
22sr.reveal('.distanceHundred9', { distance: "500px", origin: "left", delay: "750"})
23// Origin
24sr.reveal('.default');
25// Origin
26sr.reveal('.default2');
27// Delay
28sr.reveal('.delayOne', { delay: "500" });
29// Delay
30sr.reveal('.delayThree', { delay: "3000" });
31</script>
32```css
33.box12 {
34width :100%; text-align:center;
35position: absolute;
36top: 11248px; /*ブラウザのウィンドウ基準*/
37	left: -16px; /*ブラウザのウィンドウ基準*/
38  background: #fff;
39  font-weight: bold;
40  padding: 1em;
41  margin: 0 auto;
42  text-align: center;
43  border-radius: 6px;
44}
45.box-small {
46  display: inline-block;
47  width: auto;
48}
49.some-content {
50  padding: 12em 0;
51  margin: 4em 0;
52}
53```html
54<div class="shashin">
55<img class="sha" src="1476268_s_wi/voice-haikei.jpg">
56</div>
57
58
59<div class="box12 delayOne">
60<img class="sha2" src="1476268_s_wi/voice-mae.jpg">
61</div>
62

```### 前提・実現したいこと

html、css、javascriptにてウェブページを作っているのですが、
まず背景に写真画像を配置しておいて、その写真を載せている箇所までスクロールしたら
その写真のふちに、花柄の枠がフェードインするページを作りたいのですが、
花柄の、真ん中を透過にして抜いたpng画像を用意してjavascriptの「delaｙ」を使って実装したところ、
花柄の画像の透過にした所が白く表示され、背景の写真が見えないのです。

どうしたら解決出来るのか、検索してもわかりません。
どなたか解決出来る方法か、解決出来るサイトをお教えいただけませんでしょうか？

因みに、当方、まだjavascriptを扱い始めて一週間程度です。
どうかよろしくお願い致します。

### 発生している問題・エラーメッセージ

エラーメッセージ


### 該当のソースコード








### 試したこと

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2018/07/03 05:17

プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入（エラーメッセージの場合は不要）の手順で「コードハイライト化」してください。（質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください）

m.ts10806

2018/07/03 05:18

質問編集画面タイトル横にある「初心者アイコン」をご活用ください。「初心者」と質問で書くよりも伝わりますし、質問一覧に表示されるのでわかりやすくなります。

Navymac10

2018/07/03 05:59

ご指導ありがとうございます。わかる範囲で修正しました。宜しくお願い致します。

m.ts10806

2018/07/03 06:03

CSSもコードなので、同様にお願いします。また　```で囲った中は他のマークダウンの機能が無効化されます。ちょっと囲っている場所などがおかしくなっているように思います（編集前より見づらくなっている箇所がチラホラ・・・）。最初のコメントに書きましたが、質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください。

Navymac10

2018/07/04 01:30

ご指摘ありがとうございます。今後、キチンとここの投稿の仕方を学んでから投稿するように心がけたいと思います。ありがとうございました。

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

回答1件

ベストアンサー

花柄の枠画像を配置しているdiv要素に背景色:白色(#FFF)が指定されていますよ。

css
.box12 {
width :100%; text-align:center;
position: absolute;
top: 11248px; /*ブラウザのウィンドウ基準*/
left: -16px; /*ブラウザのウィンドウ基準*/
background: #fff;　←ここ！！！
font-weight: bold;
padding: 1em;
margin: 0 auto;
text-align: center;
border-radius: 6px;
}

divが無色透明であればちゃんと透過されるのではないでしょうか。お試しください。

追伸：他の方がおっしゃられていますが、マークダウンの記載がぐちゃぐちゃですね。。。回答する方の回答意欲もそがれますし、できればきれいな形で投稿して下さい。初心者マークが付いているので、大変だとは思いますが頑張って下さい！

投稿2018/07/03 07:14