안녕하세요 저는 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>
그런 다음 내 style.css 파일에 다음 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] 삭제
몇 마디 만하겠습니다