html图片显示当前位置,css – 如何根据当前视口位置将图像置于特定div中？

这对我来说效果最好:)

function loadNewContent(){

$(".loaderCont").removeClass("loading")

}

$(document).ready(function () {

$("#hide_button").on("click",function () {

$(this).closest(".bottom").toggleClass("left_hided");

$(".loaderCont").toggleClass("left_hided2");

});

$("#filter1,#filter2,#filter3,#filter4").on("click",function() {

$(".loaderCont").addClass("loading");

setTimeout(loadNewContent,2000);

});

});

CSS：

.header {

background-color: Green;

width: 100%;

margin-bottom: 20px;

height: 100px;

}

.left {

background-color: Red;

float: left;

width: 100px;

}

.left_hided .left{

margin-left: -85px;

}

.right {

background: Aqua url("http://i.imgur.com/ifyW4z8.png") 50% repeat-y;

width: calc(100% - 140px);

float: right;

}

.left_hided .right{

width: calc(100% - 55px);

}

input{

float:right;

}

.loaderCont {

background-color: rgba(255,0.6);

height: 100%;

width: calc(100% - 140px);

position: fixed;

right: 0;

top: 0;

z-index: -1;

}

.left_hided2 {

width: calc(100% - 55px);

}

#loader {

background: url(http://i.stack.imgur.com/FhHRx.gif) no-repeat center center;

position: relative;

top: calc(50% - 16px);

left: calc(50% - 16px);

display: block;

height: 32px;

width: 32px;

}

.loading {

z-index: 9001;

}