为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

鸿蒙传说 2019-12-05 15:46:04
我想将此图像作为网页的背景图像。但是,问题是图像不能覆盖整个页面,正如您在此预览中可能看到的那样,并且图像在最右端被重复。有没有一种方法可以使图像覆盖整个页面(可以是任何方式,拉伸,调整大小或新的方式)。我的代码:<!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屏幕的。我现在还可以,并且可以继续前进,请不要发布答案。
查看完整描述

3 回答

?
慕村225694

TA贡献1880条经验 获得超4个赞

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;

其中/在后台速记用于分离和区分position从size(原因位置接受单个和多个(X,Y)的值),但野生具有与该一个错误/速记所以使用如上所述。


查看完整回答
反对 回复 2019-12-05
?
大话西游666

TA贡献1817条经验 获得超14个赞

background-size: 100% 100%;

background-position: top left;

background-repeat: no-repeat;

应该可以。注意-您可以组合位置并重复到初始背景属性中


并申请


html, body { min-height: 100%; min-width: 100%; }


查看完整回答
反对 回复 2019-12-05
  • 3 回答
  • 0 关注
  • 1306 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信