gpt4 book ai didi

html - 当右侧和左侧不同时,如何重复标题图像的背景?

转载 作者:行者123 更新时间:2023-11-28 12:12:25 26 4
gpt4 key购买 nike

这是我要重复的标题的背景图片 enter image description here

由于左右不一样,如何水平重复图像?

最佳答案

如果你想让图像适应可变宽度,你需要设置一个需要重复的部分。无法对一张图像执行此操作,因为您无法镜像该图像。

您需要手动镜像镜像。一个例子可以是:

HTML:

<div class="left-image side"></div>
<div class="center"></div>
<div class="right-image side"></div>

CSS 应该是这样的:

.side {
position: absolute;
top: 0;
height: *height of the image*;
width: *width of the image*;
}

.left-image {
background: url('*link to left image*') no-repeat 0 0 transparent;
left: 0;
}

.right-image {
right: 0;
background: url('*link to right image*') no-repeat 0 0 transparent;
}

.center {
height: *height of lowest part, or height of image*;
width: 100%;
background: url(*url of image*) repeat-x 0 0 transparent;
/* or */
background: *color*;
}

中心可以是重复图像,也可以只是图像宽度和高度的背景颜色。这取决于您使用的图像。

希望对您有所帮助。

关于html - 当右侧和左侧不同时,如何重复标题图像的背景?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19408471/

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