gpt4 book ai didi

css - 背景图像重复 x 和 Y

转载 作者:太空宇宙 更新时间:2023-11-04 14:43:31 25 4
gpt4 key购买 nike

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

我正在使用 1350 像素宽屏幕的笔记本电脑。我一直在改变 repeat-y 的百分比,看看它在做什么。我仍然无法弄清楚,发生了什么。这是我的理解,如果我错了请给我更简单的解释。对我来说,如果我将 repeat 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>

最佳答案

background-repeat 属性和 background-position 属性是两个不同的东西。 background-repeat 属性设置是否或如何重复背景图像;默认情况下,背景图像在垂直方向(= repeat-y)和水平方向(= repeat-x)重复。

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

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

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

如果像您一样只指定一个关键字,则垂直轴的另一个值将为“中心”。因此,您的图像将从垂直轴的中间可见。

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

PS:没有为列指定颜色。

关于css - 背景图像重复 x 和 Y,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18072402/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com