有趣的 CSS 3－改变背景图片大小和起始位置

ITPOW2016/11/12 19:35:21

background-size

原来 CSS 中的背景图片不能改变大小，现在可以了，比如做的背景图片是 50x50，我们可以让它在背景中显示为 10x20。

background-size:10px 20px;

如果宽和高是一样的值，也可简化为一个参数。

background-origin

三个值：

content-box：背景图像 0 位置在内容区左上角。
padding-box：背景图像 0 位置在 padding 左上角。
border-box：背景图像 0 位置在 border 左上角。

注意，并不表示 0 位置以左、以上的部分就不显示，只是表示坐标 0 点在这个位置。

<style type="text/css">
.bg1
{
    float:left;
    margin:20px;
    width:100px;
    height:100px;
    padding:20px;
    background:url("http://www.itpow.com/images/cftea.gif") 0px 0px;
    border:10px solid red;
    background-origin:content-box;
}
.bg2
{
    float:left;
    margin:20px;
    width:100px;
    height:100px;
    padding:20px;
    background:url("http://www.itpow.com/images/cftea.gif") 0px 0px;
    border:10px solid red;
    background-origin:padding-box;
}
.bg3
{
    float:left;
    margin:20px;
    width:100px;
    height:100px;
    padding:20px;
    background:url("http://www.itpow.com/images/cftea.gif") 0px 0px;
    border:10px solid red;
    background-origin:border-box;
}
</style>

<div class="bg1"></div>
<div class="bg2"></div>
<div class="bg3"></div>

效果如下：

background-origin 效果

<<返回首页<<