首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >可以使用CSS3缩放背景吗?

可以使用CSS3缩放背景吗?
EN

Stack Overflow用户
提问于 2012-08-03 14:38:03
回答 4查看 575关注 0票数 0

更具体地说,是否可以使用css3的transform:scale(x,y)缩放平铺背景图像

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2012-08-03 14:52:25

虽然不能使用transform:scale(),但如果您知道所需背景图像的最终大小,则可以使用background-size来获得相同的效果。

代码语言:javascript
运行
复制
.selector {
    background-image: url(http://path/to/image.png);
    background-size: 200px 100px;
}

然而,如果你总是想要,比方说,将你用作背景的图像的宽度“加倍”,那么在这个时候似乎不太可能。

EDIT:请注意,虽然背景大小样式支持基于%的参数,但它不是图像大小的百分比,而是窗口的大小。

票数 2
EN

Stack Overflow用户

发布于 2012-08-03 14:43:14

您可以使用:

代码语言:javascript
运行
复制
background-size: 200px;
background-size: 200px 100px;
background-size: 200px 100px, 400px 200px;
background-size: auto 200px;
background-size: 50% 25%;
background-size: contain;
background-size: cover; 

 (or)

img.bg {
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 1024px;

    /* Set up proportionate scaling */
    width: 100%;
    height: auto;

    /* Set up positioning */
    position: fixed;
    top: 0;
    left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
    img.bg {
        left: 50%;
        margin-left: -512px;   /* 50% */
    }
}



       (or)


    #bg {
        position:fixed; 
        top:0; 
        left:0; 

        /* Preserve aspet ratio */
        min-width:100%;
        min-height:100%;
    }
票数 1
EN

Stack Overflow用户

发布于 2012-08-03 14:40:48

我不擅长CSS。但这只是一个想法:创建带有平铺背景的背景div (使用z-index)并缩放它。它应该是可行的

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/11790527

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档