调整背景图像的大小,因为它对于浏览器来说太大了



所以我正在设计一个不完整的 atm 网页,它只缺少 2 个按钮,所以它相当简单。我没有弄乱Divs和css样式,而是决定在photoshop中制作背景。我以 1920x1080 的分辨率创建了图像,当我应用图像作为背景时,它不适合浏览器窗口,因此右下角丢失。我可以添加任何代码来解决此问题,或者我的最佳选择只是以较小的分辨率重新创建图像,如果是这样,我应该为什么分辨率构建?

这是一个页面链接,以防我没有解释得足够清楚:http://www.itss.brockport.edu/~rsiss1/cis442/BulletinBoard/BulletinBoard

这是代码:

<?xml version = "1.0" encoding = "utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>BulletinBoard</title>
<style>
body {background: url(BulletinBoardBg.jpg);
    background-position: center no-repeat;}
</style>
</head>
<body>
</body>
</html>

尝试使用 CSS 属性

background-size: cover;

还有background-size: contain,如果您必须在屏幕上显示整个图像并且不介意边缘周围有额外的空间。

以下是 MDN 上background-size的参考。

最新更新