gpt4 book ai didi

css - 无法使 css 主体中的流体背景图像正常工作

转载 作者:太空宇宙 更新时间:2023-11-04 13:40:20 25 4
gpt4 key购买 nike

我正在尝试在我目前完全流畅的网页设计中使用背景图片,并且在这里找到了很多解决方案,但现在我被难住了!我的 CSS 中的某些东西阻止了我的背景图片显示。我正在使用 Matthew James Taylor 的多列流式布局,每当我尝试添加一些新功能时,一切都会变得一团糟。我是网页设计的新手,非常感谢您的帮助。这是我的 HTML5(希望有效):

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
<title>Blablablah</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="description" content="Blablablah" />
<meta name="keywords" content="Blablablah" />
<meta name="robots" content="index, follow" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="Blablafoo.css" media="screen" />
</head>

<body onload="parent.resizeIframe(document.body.scrollHeight)">

<div class="colmask fullpage">
<div class="col1">
<h2>BLAAAAAAAAA BLAAAAAAAAA BLAAAAAAAAA</h2>
</div>
</div>

</body>
</html>

这是我的 CSS:

body {
background-image:url(‘background.JPG’) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin:0;
padding:0;
border:0;
width:100%;
min-width:386px;
min-height:100%;
height:1px;
font-size:90%;
}
a {
color:#369;
}
a:hover {
color:#fff;
background:#369;
text-decoration:none;
}
h1, h2, h3 {
margin:.8em 0 .2em 0;
padding:0;
}
p {
margin:.4em 0 .8em 0;
padding:0;
}
.colmask {
position:relative;
clear:both;
float:left;
width:100%;
overflow:hidden;
}
.col1 {
float:left;
position:relative;
padding:0 0 1em 0;
overflow:hidden;
}
.fullpage {
min-height:592px;
}
.fullpage .col1 {
width:96%;
left:2%;
}
img {
max-width:100%;
}

所有文件都在我电脑上的同一个文件夹中,所以它不是路径。我曾尝试将前五行放在 CSS 的其他部分,但无济于事。

最佳答案

尝试使用 html 元素进行设置。

   html { 
background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSvctt0I--skoKQVfuVt-i4Et6vQ5ve7lXPkLy9sTElCWLKh1Ps) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

参见 demo here

更新:

另一种方法是使用 jQuery,(将在 IE7+ 中完美运行)

$(function () {

var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();

function resizeBg() {

if ((theWindow.width() / theWindow.height()) < aspectRatio) {
$bg.removeClass()
.addClass('bgheight');
} else {
$bg.removeClass()
.addClass('bgwidth');
}

}

theWindow.resize(function () {
resizeBg();
}).trigger("resize");

});

然后使用img设置背景图片如下:

<img src="http://3rdbillion.net/wp-content/uploads/2013/11/1b7a9c8a2df4bd4a25597f1ca0cb89f52.jpg" id="bg" alt="" />

你可以看到 demo here

关于css - 无法使 css 主体中的流体背景图像正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22741854/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com