gpt4 book ai didi

html - 如何使用html设置适合浏览器的背景图片

转载 作者:搜寻专家 更新时间:2023-10-31 21:57:55 24 4
gpt4 key购买 nike

我制作了一个简单的登录页面并将图像设置为背景,但它不适合浏览器屏幕。我为此使用 html 我应该如何使图像适合浏览器屏幕。请详细描述。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01Transitional
//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>JSP Page</title>
</head>
<body>
<h1>Login Page</h1>
<center>
<h2>SignUp Details</h2>

<body background="Indian_wallpapers_205.jpg">
<form action="LoginCheck.jsp"method="post">
</br>Username:<input type="text" name="username">
</br>Password:<input type="password" name="password">
</br>
<input type="submit" value="Submit">
</form>
</center>
</body>
</html>

最佳答案

您可以通过创建 .css 文件并链接到您的 <head> 来实现您想要的效果。在 </title> 之后的标签(关闭标题标签)。

高分辨率图像会很好用,大约 2112x1584 像素,但要考虑文件大小,因为它会影响页面加载时间。

关于您的开通<body>标记,只需删除背景属性,因为它将通过 .css 文件声明。

当您的图像准备就绪后,将此代码放入您的 .css 文件中

body {
background-image: url(imagePAth/Indian_wallpapers_205.jpg); /*You will specify your image path here.*/

-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
background-position: top center !important;
background-repeat: no-repeat !important;
background-attachment: fixed;
}

完成 .css 文件后,您可以将其链接到 <head>标签。它看起来像这样:<link rel="stylesheet" type="text/css" href="yourCSSpath/yourCSSname.css" />

这就是我制作背景图片以适应浏览器屏幕的方式。

关于html - 如何使用html设置适合浏览器的背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21036880/

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