Question

我正在尝试使用背景图片属性。我真的很困惑重复x和y。我试图弄清楚它做了什么，我发现网上发现的东西不够好。我创建了两列，左列为63％，右列为37％（近似值）。我使用了3000px宽度和160高度的背景图像，并为两列使用了两种不同的颜色。也就是说，在1890px或63％之后，颜色会发生变化。

我正在使用1350px宽屏的笔记本电脑。我不断改变repeat-y的百分比，看看它在做什么。我还是想不通，发生了什么。这就是我的理解，如果我错了，请给我更简单的解释。对我来说，如果我设置重复y 44％，那么它占据当前容器的44％，比如Z PX，并设置背景图像，从z PX开始到图像结束，在我的情况下为3000px，并且垂直重复该过程。我希望我很清楚。我对么？请让我知道你对自己的看法或解释。谢谢！

#page{

        background:url("bg.jpg") repeat-y 63%;

    }
    .clear{
       clear:both;
    }
    div.left{
        width:63.11111111%;
        float:left;



    }
    div.right{
        float:right;
        width:36%;

    }

 }

    </style>
</head>
<body>
    <div id="page">

        <div class="left">
            this is left column
        </div>
        <div class="right">
            this is right column
        </div>
    <div class="clear"></div>   
    </div>

</body>

Answer 1

background-repeat属性和background-position属性是两回事。 background-repeat属性设置是否或如何重复背景图像;默认情况下，背景图像垂直（= repeat-y）和水平（= repeat-x）重复。

在您的示例中，图像将垂直重复;但你正在使用的div并没有显示太多，因为图像比你的div大得多。 我建议您尝试使用较小的图片，例如25x25px并放入一些文本（例如lorem ipsum）或者给它一个200像素的高度，并再次使用这些值。

background-position属性设置背景图像的起始位置;第一个值是水平位置，第二个值是垂直位置。

在您的示例中，百分比描述了水平轴上从图像开始的点。

如果您只指定一个关键字，那么垂直轴的另一个值将是“center”。因此，您的图像可以从中间，垂直轴上查看。

尝试我的建议！如果它似乎不起作用，我会在网上举个例子。让我知道。

PS：没有为列指定颜色。

背景图像重复x和Y.

1 个答案: