1

我试图使用背景图像属性。我真的对重复 x 和 y 感到困惑。我试图弄清楚它的作用，我发现网上的东西我觉得不够好。我创建了两列，左列将获得 63%，右列将获得 37%（近似值）。我使用了宽度为 3000 像素、高度为 160 的背景图像，并为两列使用了两种不同的颜色。也就是说，在 1890 像素或 63% 之后颜色会发生变化。

我正在使用具有 1350 像素宽屏幕的笔记本电脑。我一直在改变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>

4

1 回答 1

1

background-repeat 属性和 background-position 属性是两个不同的东西。background-repeat 属性设置是否或如何重复背景图像；默认情况下，背景图像在垂直（=repeat-y）和水平（=repeat-x）中重复。

在您的示例中，图像将垂直重复；但是您正在使用的 div 并没有显示太多，因为图像比您的 div 大得多。我建议您尝试使用较小的图像，例如 25x25px 并放入一些文本（例如 lorem ipsum）或将其高度设置为 200 px，然后再次使用这些值。

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

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

如果您只指定一个关键字，就像您所做的那样，垂直轴的另一个值将是“中心”。因此，您的图像将从中间的垂直轴上可见。

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

PS：没有为列指定颜色。

于 2013-08-06T06:00:13.720 回答