css 背景 - 不适合 div

Question

我有一个固定宽度和高度的 div，如下所示：

<div class="fontTest">A</div>

我制作了一个大小为 800px*169px 的 jpeg 背景图像以适合这个 div。以下是我正在使用的 css：

.fontTest {
    font-family:'Noto Serif', serif; color:#744801; 
    margin-left:auto; 
    width:800px; 
    height:169px; 
    margin-right:auto; 
    background: #FDEEEE url('img/bkg1.jpg') 0 0 no-repeat fixed; 
}

我正在使用速记背景 css 属性在 1 行中定义所有背景属性。由于图像的宽度和高度与 div 的宽度和高度相匹配——图像应该完美地覆盖 div——但这并没有发生。背景图像仅部分覆盖了 div ()。请帮忙。

Answer 1

删除速记属性声明中的背景附件声明fixed。

Jsfiddle Demo

重新调整小提琴视图的大小以查看差异。

这个关键字意味着背景相对于视口是固定的。即使元素具有滚动机制，“固定”背景也不会随元素移动。

.fontTest {
    font-family:'Noto Serif', serif;
    color:#744801;
    margin-left:auto;
    width:800px;
    height:169px;
    margin-right:auto;
    background: #FDEEEE url('http://lorempixel.com/output/city-q-c-800-169-4.jpg') 0 0 no-repeat;
}

Answer 2

使用

background-size: cover;

图片会覆盖整个div。