1

私はWeb サイト(初期段階) に取り組んでおり、白い背景領域に背景クロスフェードを適用するのが非常に困難です(いくつかの画像を背景で自動回転させ、完全に塗りつぶしたいと考えています)。

HTML コードによると、CSS でクラス .main-container を使用しても問題ないはずですが、これは何も変わりません...

私はHTML + CSSを独学で学び、正しい手順を実行するためのガイダンスが必要です.

あなたは何をお勧めします？

よろしくお願いします！

（アップデート）

Tympanus.net ソリューションを使用することにしました。

これはhttp://www.marcocarlo.com/mimosa/index.htmlにうまく実装されていません

CSSコードは次のとおりです。

.cb-slideshow,
.cb-slideshow:after {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}
.cb-slideshow:after {
    content: '';
    background: transparent url(images/pattern.png) repeat top left;
    background-size:cover; 
}
.cb-slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s; 
}
.cb-slideshow li div { 
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    -webkit-animation: titleAnimation 18s linear infinite 0s;
    -moz-animation: titleAnimation 18s linear infinite 0s;
    -o-animation: titleAnimation 18s linear infinite 0s;
    -ms-animation: titleAnimation 18s linear infinite 0s;
    animation: titleAnimation 18s linear infinite 0s; 
}

白い背景領域に表示されるようにするにはどうすればよいですか (完全に覆いますか?)

よろしくお願いします！

4

1 に答える 1

0

既存のガイドを探してみてください。または、クロスフェード トランジションを備えた既存の画像スライダーを探すこともできます。ただし、独自のクロスフェードを作成する場合はbackground-size: cover、領域全体を埋めるために使用できます (例)

于 2014-01-30T00:16:40.213 に答える