6

繰り返されない背景画像が必要です。画像が終了すると、徐々に黒くなります。

これが私が言いたいことの例です。「ソフトフェージング」を見逃しているだけです。映像が途切れて黒くなってしまうので、この遷移をもっと滑らかにしたいです。それは可能ですか？

(Google からランダムに取得した画像)

body {
    background:url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png) #000 no-repeat;
}

ライブデモ: http://jsfiddle.net/sMc8a/

4

2 に答える 2

4

このコードを使用して試すことができます。http://jsfiddle.net/sMc8a/3/

HTML

<div class="example">
    Hello
</div>

CSS

body {
  background: black;
}
.example {
  width: 300px;
  height: 300px;
  background-image: -webkit-linear-gradient(top, 
      rgba(0,0,0,0.9) 0%, 
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,0.9) 100%
    ),
    -webkit-linear-gradient(left, 
      rgba(0,0,0,0.9) 0%, 
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,0.9) 100%
    ),
    url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png);

  background-image: -moz-linear-gradient(top, 
      rgba(0,0,0,0.9) 0%, 
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,0.9) 100%
    ),
    -moz-linear-gradient(left, 
      rgba(0,0,0,0.9) 0%, 
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,0.9) 100%
    ),
    url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png);

  background-image: -o-linear-gradient(top, 
      rgba(0,0,0,0.9) 0%, 
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,0.9) 100%
    ),
    -o-linear-gradient(left, 
      rgba(0,0,0,0.9) 0%, 
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,0.9) 100%
    ),
    url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png);

  background-image: linear-gradient(top, 
      rgba(0,0,0,0.9) 0%, 
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,0.9) 100%
    ),
    linear-gradient(left, 
      rgba(0,0,0,0.9) 0%, 
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,0.9) 100%
    ),
    url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png);
}
于 2013-09-01T20:52:36.890 に答える