我正在努力将设计好的网页布局变为现实。该设计可能有点不寻常，所以我不确定是否可以实现。基本上，我将有一个 900 像素的固定宽度内容框。内容框将位于页面正文的中间。我想向页面添加两个垂直列，并带有褪色的 png。左侧的 png 将从左侧的纯黑色变为右侧的透明。右侧的 png 将从右侧的纯黑色渐变为左侧的透明。这两个 png 的宽度分别为 250 像素。一旦所有东西都定位好，布局应该看起来像一张在左右边缘褪色的纸。但是，诀窍在于重新调整页面大小。我想确保当屏幕宽度小于 1500 像素时（两列都部分在屏幕之外），列不会在内容框下方滑动，而只是缩小到零。请考虑下面的图片。黑色轮廓是屏幕，蓝色是内容，红色是列。当屏幕为 1500px 宽时，列和内容对齐良好。幻觉（没有边界）是一个褪色的图像。![屏幕宽度为 1500px 时的布局][1] 当屏幕被拉伸时，列会分开，但仍会保持褪色的外观。![屏幕宽度超过 1500px 时的布局][2] 最后，当屏幕宽度小于 1500px 时，列会缩小，但每列的背景图像会以不破坏褪色外观的方式附加（例如, 左栏缩小并且黑色更靠近内容框的左侧是不正确的）。![屏幕宽度小于 1500px 时的布局][3] 考虑下面的图像。黑色轮廓是屏幕，蓝色是内容，红色是列。当屏幕为 1500px 宽时，列和内容对齐良好。幻觉（没有边界）是一个褪色的图像。![屏幕宽度为 1500px 时的布局][1] 当屏幕被拉伸时，列会分开，但仍会保持褪色的外观。![屏幕宽度超过 1500px 时的布局][2] 最后，当屏幕宽度小于 1500px 时，列会缩小，但每列的背景图像会以不破坏褪色外观的方式附加（例如, 左栏缩小并且黑色更靠近内容框的左侧是不正确的）。![屏幕宽度小于 1500px 时的布局][3] 考虑下面的图像。黑色轮廓是屏幕，蓝色是内容，红色是列。当屏幕为 1500px 宽时，列和内容对齐良好。幻觉（没有边界）是一个褪色的图像。![屏幕宽度为 1500px 时的布局][1] 当屏幕被拉伸时，列会分开，但仍会保持褪色的外观。![屏幕宽度超过 1500px 时的布局][2] 最后，当屏幕宽度小于 1500px 时，列会缩小，但每列的背景图像会以不破坏褪色外观的方式附加（例如, 左栏缩小并且黑色更靠近内容框的左侧是不正确的）。![屏幕宽度小于 1500px 时的布局][3] 当屏幕为 1500px 宽时，列和内容对齐良好。幻觉（没有边界）是一个褪色的图像。![屏幕宽度为 1500px 时的布局][1] 当屏幕被拉伸时，列会分开，但仍会保持褪色的外观。![屏幕宽度超过 1500px 时的布局][2] 最后，当屏幕宽度小于 1500px 时，列会缩小，但每列的背景图像会以不破坏褪色外观的方式附加（例如, 左栏缩小并且黑色更靠近内容框的左侧是不正确的）。![屏幕宽度小于 1500px 时的布局][3] 当屏幕为 1500px 宽时，列和内容对齐良好。幻觉（没有边界）是一个褪色的图像。![屏幕宽度为 1500px 时的布局][1] 当屏幕被拉伸时，列会分开，但仍会保持褪色的外观。![屏幕宽度超过 1500px 时的布局][2] 最后，当屏幕宽度小于 1500px 时，列会缩小，但每列的背景图像会以不破坏褪色外观的方式附加（例如, 左栏缩小并且黑色更靠近内容框的左侧是不正确的）。![屏幕宽度小于 1500px 时的布局][3] 柱子分开了，但仍然保持褪色的外观。![屏幕宽度超过 1500px 时的布局][2] 最后，当屏幕宽度小于 1500px 时，列会缩小，但每列的背景图像会以不破坏褪色外观的方式附加（例如, 左栏缩小并且黑色更靠近内容框的左侧是不正确的）。![屏幕宽度小于 1500px 时的布局][3] 柱子分开了，但仍然保持褪色的外观。![屏幕宽度超过 1500px 时的布局][2] 最后，当屏幕宽度小于 1500px 时，列会缩小，但每列的背景图像会以不破坏褪色外观的方式附加（例如, 左栏缩小并且黑色更靠近内容框的左侧是不正确的）。![屏幕宽度小于 1500px 时的布局][3]
** 无法发布图片 :(