CSS让div背景图片居中100%填充遇到的问题

在自适应网站项目中，想用CSS让div背景图片居中100%填充，却遇到了问题。为了让缩略图显示出来统一的大小，我想到的是有两种办法。一种办法就是上传的缩略图按照统一的大小，另一种办法是div里面放一个透明的默认图片，然后把缩略图当成div的背景。

按照统一大小制作缩略图是比较麻烦的，所以我采用了第二种，让缩略图作为div的背景，让背景图片横向100%填充，然后水平垂直都居中，刚开始我是这样写的：

<div style="background: url(niuchao.com.jpg) no-repeat center;"></div>

图片是居中了，但是不会100%填充，查看了一下background的简写规则如下：

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];

如果简写形式中含有background-size属性，那么必须同时写上background-position属性，同时需要在background-size前面加“/”，如果省略了就会导致样式失效。

于是，我又改成了这样的：

<div style="background: url(niuchao.com.jpg) no-repeat center / 100%;"></div>

这样一改，背景出不来了，改了好多次都不行，实在不知道哪里错了，只好放弃简写的方式，在css文件里面加了一个bg的样式：

.bg{background-size:100% auto;background-position: center;background-repeat: no-repeat;background-origin:content-box;}

html里面的代码改成：

<div class="bg" style="background: url(niuchao.com.jpg);"></div>

试了一下，不管css文件里面怎么改，一点也不起作用，最后把html里面的background改成了background-image才搞定。

<div class="bg" style="background-image: url(niuchao.com.jpg);"></div>

貌似是简写和完整版有冲突，要么全用简写，要么全用完整写法。如果你也遇到这个问题，看看能不能帮上忙，如果搞不定可以来“大超小志”微信公众号留言交流。

有问题可在下方评论留言，或关注“大超小志”微信公众号留言。

标签： CSS

赏