css3中background-size设置背景大小的问题

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3中background-size设置背景大小的问题相关的知识，希望对你有一定的参考价值。

我的代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style>
body
background-image:url(5.jpg);
background-repeat:no-repeat;
background-size:contain;

</style>
</head>
<body>
</body>
</html>
显示效果如图只有一小块

而且设置数值或者百分比就会显示成这样如下

只有一小条
求大神指点，ie crome firefox都是最新版本都试过了，结果一样
设置cover正常，没有问题，我的图片本身是600*900的

页面还没有任何元素撑开body，所以body暂时高度为0，你背景设置多大都是没用的，只显示一小部分。 参考技术A 我以前遇到这样的情况时 我就不用背景来写。我直接插入图片，然后设置图片的index为0 参考技术B 因为你的body没有内容，也就是现在没有宽高值，背景图片不会自动撑开。
你设定一个body的宽高值就好了. 参考技术C 你可以选择其他的background-size的值，使用cover就相当于全部放大100%，当然可以自己设定可以采用两种方式，一种是百分比和像素，比如设定为background-size:200%或者background-size:700px;当然具体多大自己设定

css 如何把背景图占满整个屏幕

参考技术A

    background: url(../images/login/theme4.jpg) center center no-repeat;

    background-attachment: fixed;

    background-size: cover;


 background-size: 100%;  background-size的属性可以调整试试cover，100%等

以上是关于css3中background-size设置背景大小的问题的主要内容，如果未能解决你的问题，请参考以下文章

h5背景图片尺寸怎么设置_CSS3中background-size实现背景图片大小可自定义的几种效果（代码实例 ）...

CSS3 background-size背景图片问题

#yyds干活盘点# 3 Css3 的背景

CSS3 background-size:cover 显示意外行为

第96天：CSS3 背景详解

链接悬停导致 background-size: cover;在 Chrome 中切换