带有褪色边框的动态布局

Question

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

** 无法发布图像 :(

Answer 1

最好是 jquery 和 css3 的混合。

Jquery 将允许您将主要内容保持居中，并在两侧各有一个 div。 CSS3 允许你在两侧都有渐变，而不需要图像。唯一的缺点是，如果浏览器不兼容 CSS3，它将不会显示渐变。唯一不兼容的是 IE8 及更早版本。但有一些插件可以提供帮助（Modenizr 和 IE Chrome Tab）

Jquery

$(document).ready(function(){
 windowWidth = $(window).width();
 divWidth = (windowWidth - 900) / 2;
 $('#left_container').css({width: divWidth+"px"});
 $('#right_container').css({width: divWidth+"px"});
});

$(window).resize(function() {
 windowWidth = $(window).width();
 divWidth = (windowWidth - 900) / 2;
 $('#left_container').css({width: divWidth+"px"});
 $('#right_container').css({width: divWidth+"px"});
});

Left Div CSS

background-image: linear-gradient(90 , #FFFFFF 0%, #000000 52%);
background-image: -o-linear-gradient(90 , #FFFFFF 0%, #000000 52%);
background-image: -moz-linear-gradient(90 , #FFFFFF 0%, #000000 52%);
background-image: -webkit-linear-gradient(90 , #FFFFFF 0%, #000000 52%);
background-image: -ms-linear-gradient(90 , #FFFFFF 0%, #000000 52%);

background-image: -webkit-gradient(
 linear,
 90 90,
 right 90,
 color-stop(0, #FFFFFF),
 color-stop(0.52, #000000)
);

Right Div CSS

background-image: linear-gradient(270 , #FFFFFF 0%, #000000 52%);
background-image: -o-linear-gradient(270 , #FFFFFF 0%, #000000 52%);
background-image: -moz-linear-gradient(270 , #FFFFFF 0%, #000000 52%);
background-image: -webkit-linear-gradient(270 , #FFFFFF 0%, #000000 52%);
background-image: -ms-linear-gradient(270 , #FFFFFF 0%, #000000 52%);

background-image: -webkit-gradient(
 linear,
 270 270,
 left 270,
 color-stop(0, #FFFFFF),
 color-stop(0.52, #000000)
);