gpt4 book ai didi

html - CSS 中的全屏响应式背景图片

转载 作者:技术小花猫 更新时间:2023-10-29 11:48:51 26 4
gpt4 key购买 nike

我想制作this image作为我网页的背景图片。然而,问题是图像没有覆盖整个页面,正如您在 this preview 中看到的那样。 , 并在最右端重复。有没有办法让图像覆盖整个页面(无论是任何方式、拉伸(stretch)、调整大小或新的方式)。

我的代码:

<!DOCTYPE HTML>
<html>

<head>
<title>Angry Birds Star Wars</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
body {
background: url('http://www.androidtapp.com/wp-content/uploads/2012/11/Angry-Birds-Star-Wars-Menu.png');
}
</style>
</head>

<body></body>

</html>

谢谢。

更新:

我现在终于开始相信,几乎没有任何东西可以让图像完全适合我的 PC 屏幕。我现在很好,并且正在更进一步,请不要现在发布答案。

最佳答案

jsBin demo

background: url(image.jpg) fixed 50%;
background-size: cover; /* PS: Use separately here cause of Safari bug */

fixed(背景附件)是可选的。


以上只是简写:

background-image      : url(image.jpg);
background-attachment : fixed;
background-position : 50% 50%; /* or: center center */
background-size : cover; /* CSS3 */

您可以在所有现代浏览器中但 Safari 使用:

background: url(image.jpg) fixed 50% / cover;

其中 / 用于后台速记以将 positionsize 分开和区分(因为 position 接受单个和多个 (X,Y) 值),但 Safari 对此 / 简写存在错误,因此请按上述方式使用。

关于html - CSS 中的全屏响应式背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18556896/

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