【问题标题】:Scaling background images with CSS使用 CSS 缩放背景图像
【发布时间】:2011-10-14 08:14:08
【问题描述】:

如何使用 CSS 缩放背景图像?图片是用 CSS 附加的,我想缩放它以适应一定的宽度

【问题讨论】:

标签: html css image positioning background-image


【解决方案1】:

使用background-size 属性(具有limited support)。

【讨论】:

    【解决方案2】:

    你可以试试下面的代码:

    .aboutpic {
    width: 150px; /* replace 150px with something you need */ 
    float: left;
    background-image: url(../images/aboutpic.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    height: 139px; /* replace 139 px with something you need */
    }
    

    然后在html中放:

    <div class="aboutpic"></div>
    

    它有效。我测试过了。

    【讨论】:

      【解决方案3】:

      Javascript 是一个很好的开始方式,“jquery.backstretch.js”是一个非常好的 jquery 库来缩放背景 img。

      或者,如果您的目标客户端使用现代浏览器,这意味着它可以支持 CSS3, 使用这个:

      body{
      background:url(background.jpg);
      background-repeat:no-repeat;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      }
      

      http://www.w3schools.com/cssref/css3_pr_background-size.asp

      【讨论】:

        猜你喜欢
        • 2015-05-06
        • 2018-07-19
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2012-07-08
        • 1970-01-01
        • 2010-11-12
        相关资源
        最近更新 更多