gpt4 book ai didi

100%宽度水平渐变效果的HTML/CSS设计

转载 作者:行者123 更新时间:2023-11-28 14:06:28 36 4
gpt4 key购买 nike

我正在尝试实现水平渐变拉伸(stretch)浏览器整个宽度的效果。目前,我的想法是有三个部分,一个在左边,它的背景颜色用 CSS 设置为第一种颜色。这之后是实际的渐变,它是用 CSS 设置为背景的图像。这将是 1000px 宽并充当内容区域,并使用 magin:auto 在页面中居中。然后在它的右边是第三部分,它与第一部分基本相同,只是以第二种颜色作为背景。这样,左右部分将拉伸(stretch),而中央部分(实际上包含渐变)将保持不变。

该理论以图形方式描述here .

我的问题与两侧区域有关。如前所述,中央图像是固定的 1000px,但是我怎样才能让左右区域具有流动宽度(固定高度),但只有这样,左边才从浏览器的左侧到中央 div,并且从div右侧到浏览器右侧的右侧?

我希望我已经足够清楚地解释了问题,如果没有请说明,我会尝试提供更多信息。

干杯

最佳答案

Here a fiddle for you .希望对您有所帮助。

您只需要将渐变放入容器中即可。然后你可以在里面设置列。

编辑:

这里是 100% 宽度的编辑:http://jsfiddle.net/2MEhA/2/

关于100%宽度水平渐变效果的HTML/CSS设计,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9893747/

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