Html css-如何在整个窗口中拉伸背景图像
当我试图拉伸整个窗口时,背景图像有问题。外部CSS如下:Html css-如何在整个窗口中拉伸背景图像,html,css,Html,Css,当我试图拉伸整个窗口时,背景图像有问题。外部CSS如下: hr {color:sienna;} p {margin-left:20px;} body {background-image:url("mybackground.jpg"); -webkit-background-size: cover; background-repeat: no-repeat; background-size: 70%;} @font-face /* support for browsers & IE v10
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("mybackground.jpg"); -webkit-background-size: cover; background-repeat: no-repeat; background-size: 70%;}
@font-face /* support for browsers & IE v10 onwards*/
{
font-family:homefont; src: url("font3.ttf");
}
#main
{
position:absolute;
left:450px;
top:30px;
font-family: homefont;
font-size:150px;
line-height:70%;
}
这就是我所拥有的(请参见浏览器窗口中图像右侧的空白):
有谁能给我建议如何将图像延伸到整个窗口
我已经尝试了评论中建议的建议,但是-图像似乎是从我的膝盖向下切割的:(.还有其他建议吗
你可以试试这个
background-size: 100%;
或
给你:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
工作地点:
Safari 3+
Chrome
IE 9+
Opera 10+ (Opera 9.5 supported background-size but not the keywords)
Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
下面是一篇关于您在上的问题的axcellecnt文章 卓越、简单、进步的CSS3方式:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
上中;背景尺寸-110%;背景重复-无重复
请随意增大大小。将背景图像缩放到尽可能大的大小
您需要使用background size
属性的值cover
如下所示
body {
background-image: url("mybackground.jpg");
background-repeat: no-repeat;
background-size: cover;
}
删除
背景尺寸:70%;
并添加背景尺寸:封面;
body {
background-image: url("mybackground.jpg");
background-repeat: no-repeat;
background-size: cover;
}