3

重複の可能性：
省略形の背景プロパティのbackground-size（CSS3） 

<!DOCTYPE html>
<meta charset="utf-8">
<title>An HTML5 Document</title>
<style>
    div {
        width: 500px;
        height: 400px;
        background: red url(https://www.google.com/images/logos/google_logo_41.png) 50% 50% cover no-repeat;
    }
</style>
<div></div>​

http://jsfiddle.net/gu9fh

background-size値を使用してCSSプロパティを定義したいと思いますcover。background-sizeしかし、私は単一のプロパティを書く傾向はありません。background物件に合わせたいです。ただし、背景は表示されません。

プロパティの値にCSSbackground-size値coverを追加するにはどうすればよいですか？background

ありがとう。

4

3 に答える 3

6

また、まだ注目されていないのは、すべてのブラウザ（Chromeを含む）がバックグラウンドの新しいCSS3省略形をサポートしているわけではないということです。

background-sizeほとんどの新しいブラウザはそのようにサポートしているので、より良いサポートのために、おそらくプロパティを個別に使用する必要があります。

div {
    width: 500px;
    height: 400px;
    background: red url(https://www.google.com/images/logos/google_logo_41.png) no-repeat scroll 50% 50%;
    background-size: cover;
}

上記のコードはFireFoxとChromeの両方で機能しますが、省略形は機能しません。

デモと適切な属性の順序については、以下のリンクを参照してください。

Dev-Opera-BackgroundShorthandを参照してください

于 2012-08-20T17:23:56.400 に答える
5

省略形のプロパティを使用する場合、background-size値はペアにbackground-positionなり、/

更新： http： //jsfiddle.net/5jJfQ/

こちらのドキュメントを参照してください：http ：//www.w3.org/TR/2002/WD-css3-background-20020802/#properties7

于 2012-08-20T17:13:40.127 に答える
3

の引数の順序backgroundがずれていました。繰り返しは位置の前に行く必要があります。次に、jrrdnxが指摘したように、サイズと位置は/

background: red url(https://www.google.com/images/logos/google_logo_41.png) no-repeat 50% 50%/cover;

参照： http： //jsfiddle.net/gu9fh/5/

そして良いリファレンス： http： //reference.sitepoint.com/css/background

編集： PJHが指摘したように、位置/サイズの省略形はFirefoxまたはSafariではまだサポートされていません。あなたは単にbackground-sizeそれ自身で設定する必要があります。

background: red url(https://www.google.com/images/logos/google_logo_41.png) no-repeat 50% 50%;
background-size: cover;

そして更新されたフィドル：http：//jsfiddle.net/gu9fh/6/

于 2012-08-20T17:14:07.660 に答える