我希望制作一个具有背景渐变的页面，该渐变每隔几秒改变一次颜色并在过渡之间混合。现在我想将此效果应用于被具有纯色背景的元素阻挡的上层元素。
为了更好地说明我的意思，我附上了一个简单的模型，希望您能理解我正在尝试做的事情，我愿意接受建议。
(来源:bybe.net)
问题显然是包含黑色背景的 block ，任何 PNG 透明使用的黑色背景都会看到黑色而不是渐变。
到目前为止，我将包含示例代码:
<body><!-- A Jquery script will be used to add CSS background, Easy stuff -->
<div class="blackbox">
<div class="logo"><img src="#" alt=""></div>
<hr class="h-line">
<div class="v-line"> </div>
</div>
所以我追求的是:
- 一种获取背景图像的已知 jQuery 方法，但它需要能够引用渐变的位置，以便它与背景内联。
- 让这个工作更好的解决方案，请记住页面需要响应，所以我可以使用其他方法，但由于它是响应式的，我想不出任何方法。
最佳答案
既然您要求 jQuery 解决方案的替代方案
你可以玩一下 margins 和 box-shadow和关键帧动画。
形状在这个方向上的东西(取决于你想用哪个部分做什么 - 添加内容......以及你希望它以什么方式响应):
html:
<div class="wrapper">
<div class="header"><img src="http://i.imgur.com/CUbOIxr.png" alt="Company name" /></div>
<div class="content"></div>
</div>
CSS:
body {
background:orange;
width:100%;
height:100%;
}
.wrapper {
width:40%;
height:90%;
border:30px solid #000;
border-right-width:100px;
border-bottom-width:100px;
}
.header {
width:100%;
border-bottom:10px solid transparent;
-webkit-box-shadow: 0 30px 0 #000;
-moz-box-shadow: 0 30px 0 #000;
box-shadow: 0 30px 0 #000;
}
.header img {
width:100%;
}
.content {
width:95%;
height:400px;
background-color:#000;
margin-top:30px;
}
这样就不需要 javascript 了。对于背景，您可以使用 linear gradient并使用 css 制作所有动画 transitions或 keyframe animations .您还需要调整长度并根据需要调整边框和框阴影，也许为 responsiveness 添加一些@media 查询。 .
希望这对您在正确的方向上有所帮助 =)
更新:
我希望梯度变化是个小问题 ;-) 愚蠢的我，对不起。
我将详细说明我对动画的纯 CSS 建议，但如果您不喜欢 CSS3 解决方案，您可以为背景动画选择一个 javascript slider - 虽然这是现在的热门内容;-)
好的。所以，我会添加一些带有渐变背景的更多固定定位元素(layer1 和 layer2)。
现在要在 html 中有这方面的内容:
<div class="layer layer1"></div>
<div class="layer layer2"></div>
<div class="wrapper">
<div class="header">
<img src="http://newtpond.com/test/company-name.png" alt="Company name" />
</div>
<div class="content"></div>
</div>
并在 CSS 中为它们添加一个关键帧动画(这里它只是带有 -webkit vendor 前缀 [可能是因为我是一个懒惰的流浪汉]，但我希望你能明白这个想法，并且可以添加其他的):
body {
width:100%;
height:100%;
margin:0;
padding:0;
}
/* for the animation */
.layer {
position:fixed;
width:100%;
height:100%;
}
@-webkit-keyframes GoLayer1 {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
}
@-webkit-keyframes GoLayer2 {
0% {
opacity:0;
}
50% {
opacity:1;
}
100% {
opacity:0;
}
}
.layer1 {
background: -webkit-linear-gradient(bottom, rgb(43, 70, 94) 29%, rgb(194, 41, 41) 65%, rgb(155, 171, 38) 83%);
-webkit-animation: GoLayer1 5s infinite;
}
.layer2 {
background: -webkit-linear-gradient(bottom, rgb(225, 202, 230) 29%, rgb(39, 163, 194) 65%, rgb(36, 124, 171) 83%);
-webkit-animation: GoLayer2 5s infinite;
}
/* the wrapper shape */
.wrapper {
z-index:999;
opacity:1;
position:relative;
width:40%;
height:90%;
border:30px solid #000;
border-right-width:100px;
border-bottom-width:100px;
}
.header {
width:100%;
border-bottom:10px solid transparent;
-webkit-box-shadow: 0 30px 0 #000;
-moz-box-shadow: 0 30px 0 #000;
box-shadow: 0 30px 0 #000;
}
.header img {
width:100%;
}
.content {
width:95%;
height:400px;
background-color:#000;
margin-top:28px;
}
DEMO (在 Chrome 26 中测试 - 看起来很酷=)
现在我可以根据这种纯 CSS 方法为您指明方向。还有一些东西需要修改并考虑浏览器兼容性。但它肯定是另一种选择......并且是朝着 html5 和 css3 的发展方向迈出的一步(如果你想既热又酷;-)，呵呵，抱歉，太愚蠢了。
祝你好运!
更新 2:
因此，我稍微克服了自己的懒惰，并在顶部示例中添加了更多 vendor 前缀(当然，您可以使用任何图像作为背景):
DEMO
我在这里添加另一个示例，即使用 png 图像作为渐变，并在背景中上下滑动(作为另一种选择):
DEMO
关于javascript - 如何使用 jQuery 和 CSS 在底层以精确位置获取 DIV 的背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16528777/