嗨,我有一个使用PHP和CSS开发的系统。
我希望背景图片能覆盖每个页面的全屏。但是,使用我现有的设置,图像会覆盖屏幕上的其他内容。我最初在我的首页上尝试过此操作。如图所示,我在第19行的php文件中创建了一个img标签(学习)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome - <?php echo $userRow['username']; ?></title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="header">
<div id="left">
<label>NHSCT E-Learning Portal</label>
</div>
<div id="right">
<div id="content">
Welcome <?php echo $userRow['forename']; ?> <a href="logout.php?logout">Sign Out</a>
</div>
</div>
</div>
<img src="images/Learning.jpg" id= "Learning" alt="">
<br>
<p align="center"><img src="title.jpeg" width="400"height="100" alt="title.jpeg">
<br>
<center>
<h1> Select an E-Learning Module<h1>
<br>
<table align="center" height="200" width="40%" border="0">
<tr>
<td><button name="Surface" onclick="window.location.href='SurfaceExecute.php'">Surface Pro Basic Skills</button></td>
</tr>
<td><button name="eNISAT" onclick="window.location.href='eNISATExecute.php'">eNISAT Tutorials</button></td>
</tr>
<td><button name="Email" onclick="window.location.href='EmailExecute.php'">Email Tutorials</button></td>
</tr>
<td><button name="Policies" onclick="window.location.href='Policyview.php'">Policies and Procedures</button></td>
</tr>
</table>
</body>
</html>
然后,将以下CSS添加到我的style.css文件中
/* css for home page */
#Learning {
position: fixed;
top: -20;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
我的问题是,如何在背景中以顶部显示现有屏幕内容的方式显示此图像?还是有办法使背景图像变得不透明,以便其他内容可以通过它看到并单击?
UPDATE从提供的答案中找到解决方案。从php文件中删除了img标签,并将CSS更新为以下内容
html {
background: url(images/Learning.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
您将在CSS中使用background-image属性。如果要对整个页面执行此操作,则最好在body元素上使用它:
body {
background-image : ........;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句