-1

私のウェブサイトでは、これは背景画像のスライドショーで機能しています。しかし、体にも同じことが必要です。誰でも私を助けることができますか？

.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;
}
4

4 に答える 4

0

レスポンシブ デザインと呼ばれるものを使用できます。メディア クエリを使用して、画面の解像度に応じて調整します。一般的な検索エンジンでレスポンシブ デザインを検索するだけで、リンクから多くのことを学ぶことができます。

今のところ、このスタイルを体に追加できます

body {
  width:  100%;
  height: 100%;
}

そうすることで体が反応するようになります。

于 2013-03-27T06:55:54.780 に答える
0

ブラウザー ウィンドウのサイズが変更されたときにページのサイズを変更する場合は、メディア クエリを使用できます (最新のブラウザーのみがこれをサポートしています)。または、JavaScript を使用することを選択できます (3 番目のオプションは両方)。ただし、あなたの質問は、JavaScriptを避けたいことを示しています。メディアクエリを使用して以下の例を作成しました。画面サイズが 800px から 1000px の場合に CSS が適用されます。必要に応じて min または max を使用するなど、ステートメントを組み合わせることができます。

@media all and (max-width: 1000px) and (min-width: 800px) {
  .cb-slideshow li span {
    /* css here*/
  }
}

メディア クエリを使用して任意の要素を変更できます。レスポンシブ デザインの作成によく使用されます。

于 2013-03-27T06:45:11.827 に答える
0

十分なコンテンツがない場合でも、ボディをウィンドウ全体に設定する方法を探している場合は、試してください。

html, body{
    width: 100%;
    height: 100%
}
于 2013-03-27T06:46:13.153 に答える
0

簡単な例として、これをページに追加するだけで、ページが 960px 未満の場合、本文全体が非表示になります。

@media screen and(max-width:960px){
   body{
      display:none;
   }
}

すべてのサイズに合わせて必要な数の変更を追加できるようになりました

于 2013-03-27T06:59:18.470 に答える