如何使用jQuery和CSS在底层上使用精确位置提取DIV的背景 [英] How to fetch the background of DIV on a bottom layer with exact position using jQuery and CSS
问题描述
我想让一个页面有一个背景渐变，每隔几秒改变颜色，并在过渡之间混合。现在我想将这个效果应用到被具有坚实背景的元素阻止的上层元素。
为了给你一个更好的例子我的意思是附上了一个简单的样机，希望你明白我正在尝试做什么，我愿意接受建议。
问题显然是包含黑色背景的块，任何PNG透明使用会看到黑色不是渐变。
到目前为止，我将包含示例代码：
body><！ - 一个Jquery脚本将被用来添加CSS背景，容易的东西 - >
< div class =blackbox>
< div class =logo>< img src =＃alt =>< / div>
< hr class =h-line>
< div class =v-line> < / div>
< / div>
所以我要的是：
- 一种已知的jQuery方法，用于获取背景图片，但需要能够引用渐变的位置，以使其与背景内联。
- 一个更好的解决方案，让这个工作，请记住，页面需要响应，所以我可以使用其他方法，但由于其响应我不能想到任何。
因为你要求替代jQuery解决方案
与利润和 box-shadow 和关键帧动画。
这个方向与形状有关使用哪个部分 - 添加内容...以及以何种方式您希望其响应）：
html：
< div class =wrapper>
< div class =header>< img src =http://i.imgur.com/CUbOIxr.pngalt =公司名称/>< / 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。对于背景，您可以使用 线性渐变 并使用css 转换 执行所有动画，或 关键帧动画 。您还需要使用长度，并根据您的需要调整边框和框阴影，也许添加一些@media查询 responseiveness 。
希望这能帮助您朝正确的方向做些工作=）
更新：
我希望梯度变化是更小的问题;-)傻的我，对不起。
我将详细说明我的CSS动画的建议，但是如果你不喜欢CSS3解决方案，你可以为背景动画选择一个javascript滑块。是现在的热门东西; - ）
好的。所以，我会添加一些更多的固定定位元素与渐变背景（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.pngalt =公司名称/>
< / div>
< div class =content>< / div>
< / div>
并在 CSS 中添加关键帧动画与-webkit供应商前缀[可能是因为我是一个懒惰的烧伤]，但我希望你能得到的想法，并可以添加其他）：
body {
width：100％;
height：100％;
margin：0;
padding：0;
}
/ *用于动画* /
.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;
}
/ *包装形状* /
.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;
}
仅CSS方法。仍然有东西要修改，并考虑浏览器兼容性。但是它肯定是一个替代方法...和html5和css3的方向上的一步（如果你想变得很酷和凉爽;-)，hehe，对不起，太多的silliness。
祝你好运！
更新2：
$ b b
所以，我克服了我的懒惰一点点，并添加了一些更多的供应商前缀到顶部的例子（当然，你可以使用任何图像作为背景）：
DEMO
在这里，我添加了另一个例子，即使用用于渐变的png图像，并且在背景中向上和向下滑动（作为另一种选择）：
DEMO
I'm looking to make a page that has a background gradient that changes color every few seconds and blends between transitions. Now I want to apply this effect on the to the upper elements that are blocked by a element that has a solid background.
To give you a better example what I mean I have attached a simple mockup and hopefully your understand what I'm attempting to do, I'm open to suggestions.
The problem is obviously the block that contains the black background which any PNG transparent used would see black not the gradient.
I'll include sample code so far:
<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>
So what I'm after is either:
- A known jQuery method to obtain a background image but it needs to be able to refer of the position of the gradient so its inline with the background.
- A better solution to getting this to work, please bare in mind that the page needs to be responsive so I could use other methods but since its responsive I can't think of any.
Since you ask for alternatives to jQuery solutions
You could play a little with margins and box-shadow and keyframe animations.
Something in this direction for the shape (depends on what you want to do with which part - add content ... and in what way you want it to be responsive):
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;
}
This way no javascript is needed. And for the background you can use a linear gradient and do all animations with css transitions or keyframe animations. You also need to play with the lengths and adjust the borders and box-shadows to your needs, maybe add some @media queries for the responsiveness.
Hope this helps you a little in the right direction =)
Update:
I hoped the gradients changing was the smaller problem ;-) Silly me, sorry.
I will elaborate my CSS-only suggestion for the animation, but you can choose a javascript slider for the background animation, if you don't like CSS3 solutions - although this is the hot stuff now ;-)
Ok. So, I would add some more fixed positioned elements with gradient backgrounds (layer1 and layer2).
To have something in this direction in the html now:
<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>
and add a keyframe animation on them in CSS (here it is just with the -webkit vendor prefix [probably cause I am a lazy bum], but I hope you can get the idea, and could add the others):
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 (tested in Chrome 26 - looked cool =)
This is now where I can point you according this CSS-only approach. There is still stuff to modify and consider browser compatibility. But it is certainly an alternative ... and a step in the direction where html5 and css3 is going (if you want to be hot and cool ;-), hehe, sorry, too much silliness.
Good luck!
Update 2:
So, I overcame my laziness a tiny bit and added some more vendor prefixes to the top example (and of course you can use any image as background):
DEMO
And here I add another example, that is using a png image for the gradient, and is sliding up and down in the background (as another alternative):
DEMO
这篇关于如何使用jQuery和CSS在底层上使用精确位置提取DIV的背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
