使用CSS在现有内容后面的网页上显示背景图像

scubbastevie

嗨,我有一个使用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']; ?>&nbsp;<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;
}
纪尧姆·吉拉顿(Guillaume Giraudon)

您将在CSS中使用background-image属性。如果要对整个页面执行此操作,则最好在body元素上使用它:

body {
   background-image : ........;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用CSS在全屏背景图像之后显示内容

来自分类Dev

完整的背景图像在背景颜色后面的 y 轴上重复

来自分类Dev

背景图像未使用 CSS 显示

来自分类Dev

想要在背景图像上创建透明的颜色叠加层,但希望叠加层前面的所有内容

来自分类Dev

在 p5JS 画布上更改背景图像,显示背景图像后面已绘制的对象

来自分类Dev

如何使用背景图像后面的引导程序将 <div> 放在中心上方?

来自分类Dev

如何使用CSS在前景图像上显示背景图像

来自分类Dev

没有内容时如何显示背景图像?

来自分类Dev

试图设置背景图像,但 div id 名称没有显示在后面的代码中,我做错了什么?

来自分类Dev

CSS / PHP-背景图像移到内容后面并离开屏幕

来自分类Dev

使用CSS在具有固定纵横比的背景图像上覆盖图像

来自分类Dev

无法使用qualtrics上的javascript显示背景图像

来自分类Dev

如何在单个表格后面显示身体背景图像?

来自分类Dev

背景图像未在 ios 上显示

来自分类Dev

使用带有CSS背景图像的CORS标头

来自分类Dev

使用CSS模糊没有背景图像的元素

来自分类Dev

CSS:背景图像未显示

来自分类Dev

CSS将不会显示背景图像?

来自分类Dev

不显示本地CSS背景图像

来自分类Dev

CSS:背景图像不显示的div

来自分类Dev

背景图像:未在 CSS 中显示

来自分类Dev

Spring MVC和角度显示网页背景图像

来自分类Dev

网页的背景图像未显示在 html 中

来自分类Dev

没有显示背景图像

来自分类Dev

没有显示背景图像

来自分类Dev

根据上下文使用CSS显示不同的背景图像(无需显式声明每个单独的背景图像)

来自分类Dev

Xamarin形成所有页面的背景图像

来自分类Dev

在文本后面的动态文本字符串的末尾添加背景图像

来自分类Dev

整页谷歌地图后面的背景图像未出现在html输出中

Related 相关文章

  1. 1

    使用CSS在全屏背景图像之后显示内容

  2. 2

    完整的背景图像在背景颜色后面的 y 轴上重复

  3. 3

    背景图像未使用 CSS 显示

  4. 4

    想要在背景图像上创建透明的颜色叠加层,但希望叠加层前面的所有内容

  5. 5

    在 p5JS 画布上更改背景图像,显示背景图像后面已绘制的对象

  6. 6

    如何使用背景图像后面的引导程序将 <div> 放在中心上方?

  7. 7

    如何使用CSS在前景图像上显示背景图像

  8. 8

    没有内容时如何显示背景图像?

  9. 9

    试图设置背景图像,但 div id 名称没有显示在后面的代码中,我做错了什么?

  10. 10

    CSS / PHP-背景图像移到内容后面并离开屏幕

  11. 11

    使用CSS在具有固定纵横比的背景图像上覆盖图像

  12. 12

    无法使用qualtrics上的javascript显示背景图像

  13. 13

    如何在单个表格后面显示身体背景图像?

  14. 14

    背景图像未在 ios 上显示

  15. 15

    使用带有CSS背景图像的CORS标头

  16. 16

    使用CSS模糊没有背景图像的元素

  17. 17

    CSS:背景图像未显示

  18. 18

    CSS将不会显示背景图像?

  19. 19

    不显示本地CSS背景图像

  20. 20

    CSS:背景图像不显示的div

  21. 21

    背景图像:未在 CSS 中显示

  22. 22

    Spring MVC和角度显示网页背景图像

  23. 23

    网页的背景图像未显示在 html 中

  24. 24

    没有显示背景图像

  25. 25

    没有显示背景图像

  26. 26

    根据上下文使用CSS显示不同的背景图像(无需显式声明每个单独的背景图像)

  27. 27

    Xamarin形成所有页面的背景图像

  28. 28

    在文本后面的动态文本字符串的末尾添加背景图像

  29. 29

    整页谷歌地图后面的背景图像未出现在html输出中

热门标签

归档