液体背景

我想在我的网站上的液体背景如一个你可以在这个网站上看到： http://www.baliilmare.com/液体背景

我曾经在过去都做到了使用Flash和ActionScript 3的，但它确实似乎过时作为一个选项

和最大宽度100％的CSS技巧并没有给出相同的结果。

我其实想从这个网站收获Javascript，但是在JavaScript方面我真的很喜欢，并且需要一个tut或者可能有人指向正确的JS/Jquery（我看到从源头使用不同的.js文件）我可以然后谷歌它，看看它是如何工作的...

有人可以帮忙吗？

来源

2012-09-27 Maxence

这一切是一个CSS固定的背景 –

使用Firefox或Chrome，然后右键单击 - >检查元素。这是查看网站背后情况的最快方法。

他们正在使用图像作为封面。

HTML：

<div class="coverImg" style="background-image: url(urltoimage); height: 456px; "> 
</div>

CSS：

.coverImg { 
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); 
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); 
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); 
position: relative; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
background-repeat: no-repeat; 
background-position: center center; 
background-attachment: fixed; 
}

来源

2012-09-27 21:30:22

非常感谢迈克尔。虽然我不确定什么是“封面”。 – Maxence

这里没有涉及JavaScript吗？我可以收获CSS并获得相同的结果吗？ – Maxence

这是正确的。 –

你也许可以在背景图像加载到你的身体标记：

body { background-image: url(/images/thisbackground.jpg);

希望这有助于

来源

2012-09-27 21:30:11 Losbear

回答

相关问题