Question

所以在我的页面上：dunnrite.co.uk/frame2你会发现＆＃34;文本设计＆＃34;在5个固体颜色块下面标出一些图案。它们被设置为div的背景图像。问题是因为我希望这些div很小，它会剪掉原始图像的负载。如何获得它以使所显示的图像更加缩小以更多地显示图案？

我的css只是

background-image:url("Images/pattern12.jpg");

谢谢，

乔纳森

Answer 1

使用background-size CSS属性，您可能希望使用cover值，这可确保背景完全覆盖容器，而不会扭曲图像（如果宽高比不同，则剪切会发生。）

您还可以为背景图片指定显式尺寸，例如45px，如您的情况。

background-size的文档可在此处找到：https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Answer 2

我使用transform：scale（2,2）放大元素;属性。

这里是演示链接.. http://jsfiddle.net/s3hWj/4/

<div class="wrap">
    <div></div>
    <p>hello</p>
</div>


html, body {
    height: 100%;
}

div.wrap {
    height: 33%;
    width: 33%;
    overflow: hidden;
    position: relative;
}

div.wrap > div {
    position: absolute;
    height: 100%;
    width: 100%;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
    background-image: url('http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg');
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    z-index: -1;
}

div.wrap:hover > div {
    -moz-transform: scale(2,2);
    -webkit-transform: scale(2,2);
    transform: scale(2,2);    
}

如何获得缩小的背景图像？

2 个答案: