4

那时，我刚刚在玩我的网站，并在一些图像上添加了一个“新”横幅，我已经完成了我能想到的最简单的方法，如下所示..

<img style="background:url(images/pic3.jpg)" src="images/new.png" alt="" /></a>

现在，在桌面上查看时效果很好，因为图像已经适合网站的大小，但是当我在移动设备上查看时，.png 图像被缩小，而不是背景图像..

我知道我从 css 中遗漏了一些东西，但是由于我还在学习，我不知道它到底遗漏了什么，这就是你们进来的地方。

这是我的html..

<div class="thumbnail">
    <a href="#">
        <img style="background:url(images/pic3.jpg)" src="images/new.png" alt="" />
             </a>
                 </div>

这是有问题的移动CSS..

.thumbnails
{
}

    .thumbnails .thumbnail
    {
        border-top: solid 1px #e5e5e5;
        padding-top: 2em;
        margin-top: 2em;
    }

    .thumbnails .first
    {
        border-top: 0;
        padding-top: 0;
        margin-top: 0;
    }

    .thumbnails .thumbnail img
        {
            margin-top: 5px;
            height: 180px;
            margin-right: 8px;
        }

    .thumbnails .thumbnail blockquote
        {

            margin-left: 143px;
        }

所以基本上，我只需要知道，如何使背景图像像前景图像（.png 图像）一样缩小

我相信有人可以提供帮助，非常感谢。

编辑：这是一个快速的小提琴，所以你可以看到发生了什么...... http://jsfiddle.net/bBMdp/

谢谢

4

3 回答 3

6

试试这个：

.thumbnails .thumbnail img{
    margin-top: 5px;
    height: 180px;
    margin-right: 8px;

    background-size: 100% 100%;

}

或者：

.thumbnails .thumbnail img{
    margin-top: 5px;
    height: 180px;
    margin-right: 8px;

    background-size: cover;

}

来源

MDN - 背景尺寸 - CSS

于 2013-04-05T10:04:11.147 回答
1

使用background-size:XXpx XXpx;第一个值是取宽度，第二个值是取高度。

于 2013-04-05T10:04:54.670 回答
0 
-webkit-background-style: cover;
-moz-background-style: cover;
-o-background-size: cover;
background-style: cover;

这将缩小背景，因此它只足以覆盖整个盒子。

于 2013-04-05T10:11:09.037 回答