如何在不使用CSS background
和 background-attachment
属性的情况下添加视差效果?
我在一个 div
中有一个 img
标签,并希望为图像添加视差滚动效果,以下是代码:
function resize_div()
{
var image_height = $('.project-image img').height();
var div_height = $('.project-image').height();
var window_height = $(window).height();
var window_width = $(window).width();
$('.project-image').css('height', window_height - 80);
}
$(window).resize(function () {
resize_div();
});
.project-details
{
width:100%;
}
.project-image{
text-align:center
}
.project-description
{
line-height:15px;
margin:0 0 10px
}
.img-responsive
{
height: auto;
max-width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="project-details">
<div class="project-image">
<img src="http://placehold.it/350X225" class="img-responsive">
</div>
<h1>
Project Title
</h1>
<p class="project-description">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<br/>
<br/>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<br/>
<br/>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
问题:我无法将图片放在
的背景中,所以只能使用
标签来实现。
编辑:该图片在
中水平居中,并且使用自定义JavaScript在浏览器调整大小或移动/旋转平板电脑时更新图像和
大小。尝试了position:absolute和position:fixed,但似乎无效。
编辑-2:这是fiddle链接