Question

所以我设计了一个不完整的网页，它只缺少2个按钮，所以它非常简单。我决定在photoshop中制作背景，而不是乱搞Divs和css造型。我以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>

Answer 1

尝试CSS属性

background-size: cover;

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

Here's a reference for background-size on MDN

调整背景图片的大小，因为它对浏览器来说太大了

1 个答案: