如何使用jQuery和CSS在底层使用精确位置获取DIV的背景
Sim*_*ter 14 html javascript css jquery html5
我正在寻找一个页面,其背景渐变每隔几秒就会改变颜色,并在转换之间进行混合.现在我想将此效果应用于由具有纯色背景的元素阻挡的上部元素.
为了给你一个更好的例子我的意思是我附上了一个简单的模型,希望你理解我正在尝试做什么,我愿意接受建议.
问题显然是包含黑色背景的块,任何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方法来获取背景图像,但它需要能够引用渐变的位置,使其与背景内联.
- 一个更好的解决方案让这个工作,请记住页面需要响应,所以我可以使用其他方法,但因为它的响应我不能想到任何.
Mar*_*jak 18
因为你要求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了.对于背景,您可以使用线性渐变,并使用css 过渡或关键帧动画执行所有动画.您还需要使用长度并根据需要调整边框和框阴影,可能会为响应性添加一些@media查询.
希望这能帮助你朝着正确的方向前进=)
更新:
我希望渐变的变化是一个小问题;-)傻傻的我,对不起.
我将详细阐述我对动画的CSS建议,但你可以为背景动画选择一个javascript滑块,如果你不喜欢CSS3解决方案 - 虽然这是现在最热门的东西;-)
好.所以,我会添加一些具有渐变背景的固定定位元素(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供应商前缀[可能因为我是一个懒惰的流浪汉],但我希望你能得到这个想法,并可以添加其他的):
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:
所以,我稍微克服了我的懒惰,并在顶部示例中添加了一些供应商前缀(当然,您可以使用任何图像作为背景):
DEMO
在这里我添加另一个例子,即使用png图像作为渐变,并在后台上下滑动(作为另一种选择):
DEMO
| 归档时间： |
|
| 查看次数： |
1587 次 |
| 最近记录： |