视差效果CSS?

时间:2013-11-13 15:04:33

标签: html css parallax

我正在尝试使用css创建一个简单的视差效果,我有以下code创建我正在寻找的效果,但它似乎放大图像,所以我的图像的一半被切断在角落里。如何修改我所拥有的内容以保持图像的实际大小?

<div id="slide4" class="slide" data-stellar-background-ratio="0" data-slide="4"> </div>
    <div id="slide2" class="slide" data-stellar-background-ratio="0.5" data-slide="2"> </div>

#slide4 {background-image: url("http://2.bp.blogspot.com/-m95Wunj4M-g/T8zFSAFdh4I/AAAAAAAAEhg/y9W8e-Iu4WQ/s1600/Flower-wallpaper-32.jpg");
background-size: contain;
float: left;
margin-top:20px;
height: 450px;}

.slide {background-attachment: fixed;
height: 100%;
position: inherit;
width: 100%;}

1 个答案:

答案 0 :(得分:1)

background-size: cover;

正如你在小提琴的this fork中看到的那样