css精灵图平铺背景_背景重复和CSS精灵

css精灵图平铺背景

CSS sprites are a great way to improve the loading speed of your pages. One of the problems you might face with sprites is how to deal with cases when the background repeats.

CSS Sprites是提高页面加载速度的好方法。 Sprite可能会面临的问题之一是如何处理背景重复的情况。

The rule is pretty simple: if you want the background to repeat vertically (top to bottom), place the images in the sprite horizontally (left to right) and make sure the individual images in the sprite have the same height. For the opposite case: when you want to repeat horizontally, sprite vertically.

规则非常简单：如果要垂直重复背景(从上到下)，则将图像水平放置在精灵中，并确保精灵中的各个图像具有相同的高度。 对于相反的情况：当您想水平重复时，请垂直精灵。

例 (Example)

» Demo

»演示

You have three divs and you want to repeat their background vertically, so that the background takes the whole height of the div, according to the content.

您有三个div，并且要垂直重复其背景，以便根据内容，背景占据整个div的高度。

Source images:

源图像：

1. 
2. 
3. 

Singe image sprite:

单一图片精灵：

CSS definitions to make this work:

CSS定义可以使这项工作：

    div {
        background-image:url(sprite8.png);
        background-repeat: repeat-y;
        width: 160px;
        padding: 20px;
        margin: 20px;
        float: left;
    }
 
    #my {
        background-position: 0px;
    }
    #my2 {
        background-position: -200px;
    }
    #my3 {
        background-position: -400px;
    }

Every image is 200px wide. Because of the 2x20px margin left and right, the width is 160px (=200 - 20 - 20)

每个图像的宽度均为200px。 由于左右边距为2x20px，因此宽度为160px(= 200-20-20)

The tree divs have IDs: my, my2, my3

树div具有ID： my ， my2 ， my3

结果 (Result)

Once again, the result

再一次，结果

Tested on Windows with IE7, FF, O, S.

在Windows上使用IE7，FF，O，S进行了测试。

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/background-repeat-and-css-sprites/

css精灵图平铺背景