3

私はこのCSSを持っています：

body
{
    background-position: center top;
    background-color: rgb(237, 237, 237);
    font-size: .85em;
    font-family: "Trebuchet MS" , Verdana, Helvetica, Sans-Serif;
    margin: 0px auto;
    padding: 0;
    color: #696969;
    width: 1000px;
    height: 1200px;
    background-image: url('Background.png');
    background-repeat: no-repeat;
    background-attachment: inherit;    
    top: 0px;
}

ウィンドウを最大化すると問題ありませんが、ウィンドウを小さくすると背景画像が移動します。

これはmaximizedbrowserウィンドウでどのように見えるかです

そしてこれはウィンドウサイズを変更した後です

4

3 に答える 3

0

これを試して：

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position:fixed;
于 2012-06-25T19:04:06.180 に答える
0

まず最初に、CSSプロパティをグループ化してみてください。

body {
width: 1000px;
height: 1200px;
background: #EDEDED url('Background.png') center top inherit no-repeat;
top: 0;
margin: 0 auto;
padding: 0;
font: .85em "Trebuchet MS" , Verdana, Helvetica, Sans-Serif;
color: #696969;
}

コード全体またはページへのリンクが表示されるように、問題にjsFiddleを提供することもできますか？

http://jsfiddle.net/

ありがとう

于 2012-06-25T19:15:11.273 に答える
0

あなたが人々から得るほとんどの答えはIE9+を必要とします（それはCSS3なので）。ただし、ユーザーが古いブラウザーも使用していると予想される場合（ここでは実用的で安全です）、これを行うために必要な方法はjQuery/JavaScriptを使用することだと思います。私は過去にCSS3で同様のことをしましたが、後でほとんどの企業/企業がまだIE8を使用しており、これを行うための最良の方法はJavaScriptを使用することであることに気付きました。

次にいくつかの例を示します。

  1. http://buildinternet.com/project/supersized/slideshow/3.2/demo.html （これは素晴らしい例です）
  2. http://designshack.net/?p=13616
  3. http://css-tricks.com/examples/FullPageBackgroundImage/jquery.php
于 2012-06-25T19:34:38.043 に答える