html菜鸟教程css3背景图片的大小,位置元素在背景图像上.但是BG img用窗口改变大小. CSS...

body {

background:url(https://www.google.com.au/images/srpr/logo4w.png) no-repeat center center fixed;

-webkit-background-size:cover;

-moz-background-size:cover;

-o-background-size:cover;

background-size:cover;

}

#pointer {

margin-left:-10px;

margin-top:-10px;

width:20px;

height:20px;

background-color:#F00;

position:fixed;

}@H_502_7@

JS

var image = { width: 550,height: 190 };

var target = { x: 184,y: 88 };

var pointer = $('#pointer');

$(document).ready(updatePointer);

$(window).resize(updatePointer);

function updatePointer() {

var windowWidth = $(window).width();

var windowHeight = $(window).height();

// Get largest dimension increase

var xScale = windowWidth / image.width;

var yScale = windowHeight / image.height;

var scale;

var yOffset = 0;

var xOffset = 0;

if (xScale > yScale) {

// The image fits perfectly in x axis,stretched in y

scale = xScale;

yOffset = (windowHeight - (image.height * scale)) / 2;

} else {

// The image fits perfectly in y axis,stretched in x

scale = yScale;

xOffset = (windowWidth - (image.width * scale)) / 2;

}

pointer.css('top',(target.y) * scale + yOffset);

pointer.css('left',(target.x) * scale + xOffset);

}@H_502_7@