在我用下面的CSS規則的所有瀏覽器中的背景圖片,和它的作品固定在IE8
// it fits the background image to container
background-size: contain;
background-size: cover;
是否有CSS規則,使其在IE8工作,同時,還是應該使用JavaScript?
在JavaScript的情況下,我正在使用jQuery。
什麼是最好的方式來激活我的目標?
在我用下面的CSS規則的所有瀏覽器中的背景圖片,和它的作品固定在IE8
// it fits the background image to container
background-size: contain;
background-size: cover;
是否有CSS規則,使其在IE8工作,同時,還是應該使用JavaScript?
在JavaScript的情況下,我正在使用jQuery。
什麼是最好的方式來激活我的目標?
有一個jQuery plugin或本javascript fallback與過濾
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
檢查same page for more跨瀏覽器的方法
+1感謝您的回覆。假設圖像是外部的,我應該如何更改src ='。myBackground.jpg'? –
嗨@LorraineBernard,我想你可以把它改成'src ='http://etc.com/myImage.jpg''。檢查[規格](http://msdn.microsoft.com/en-us/library/ms532920(v = vs.85).aspx) – Giona
你可以這樣做:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<img src="http://i47.photobucket.com/albums/f156/Bob_McBobBob/Awesome_Background_by_smirfy.jpg" class="bgimg" />
<div class="frame">
<div class="contents">
page contents
page contents
page contents
page contents
page contents
</div>
</div>
</body>
</html>
CSS:
html {
background:#000;
}
html, body {
padding:0;
margin:0;
overflow:hidden;
height:100%;
}
.bgimg {
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
.frame {
color:white;
width:100%;
height:100%;
overflow:auto;
}
.contents {
padding:10px;
}
演示網站:http://jsbin.com/enevov/1/edit
就可以實現通過改變不同的效果 寬度:100%; 身高:100%; 上.bgimg,實現不同的效果,這取決於你是否想要一個失真與否,例如剛剛width: 100%
將使其跨頂碰,等...
希望這有助於-ck
在IE8的最佳方式上伸展整個窗口的形象?那麼,可能是一個拉伸的'img'標籤,因爲IE8不會調整'background-image's – TheZ
我應該如何拉伸背景圖片?我的意思是我可以做'$(body).css('background-image')'然後? –