1

複数の背景を発見しました。複数の背景のリストのこれらの背景の 1 つだけに決定されたプロパティを適用する方法を知りたいです。どうすれば個別にターゲットにできますか?

以下に例を示します。

body{
    background:
        url(images/small-group-bubbles.png) repeat-x fixed 10% 0,
        url(images/blur-bubble.png) repeat-x fixed -130% 0,
        url(images/big-bubble.png) repeat-x fixed 40% 0,
        url(images/green-gra-bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: #87d677;

ご覧のとおり、複数の背景のリストがありますが、これらの要素の 1 つが background-size で画面全体をカバーするようにしたいと考えています。もちろん、このコードはすべての画像に cover プロパティを適用します。このカバー プロパティを最後の画像にのみ適用したいと思います: green-gra-bg/jpg。

これどうやってするの？

4

1 に答える 1

1

バックグラウンド URL ごとにインラインでサイズを指定できると思います。

ここに画像の説明を入力

リンクは次のとおりです。 http://www.css3.info/preview/multiple-backgrounds/

たとえば、最後の URL で以下の /cover を使用します

body{
    background:
        url(images/small-group-bubbles.png) repeat-x fixed 10% 0,
        url(images/blur-bubble.png) repeat-x fixed -130% 0,
        url(images/big-bubble.png) repeat-x fixed 40% 0,
        url(images/green-gra-bg.jpg) no-repeat center/cover fixed;
    background-color: #87d677;
}

私自身の個人的な例として、見つけた例をテストしました:
http://www.netmagazine.com/tutorials/get-grips-css3-multiple-background-images

body {
    background: 
        url(imgs/cloud.png) top center/800px no-repeat, 
        url(imgs/clouds-scatter.png) -46% -330px/500px repeat-x, 
        url(imgs/hills.png) bottom center repeat-x, 
        url(imgs/peaks.png) bottom right repeat-x;
}

私が追加した 800px と 500px のサイズは、互いに独立して各レイヤーに影響を与えているようです。

于 2013-04-24T14:50:48.603 に答える