HTML – 如何通过CSS拉伸背景图像/图像以填充容器？

发布时间：2020-12-14 18:41:54 所属栏目：资源来源：网络整理

导读：我有一个比例矢量图像,我希望它填充一个容器.关于SO有几个这样的问题,尽管它们有点老了.例如. Stretch and scale CSS background 但是,当我试图实施这样的解决方案时,结果令人失望. 例如： body { margin: 0; padding: 0; text-align: center; color: #000;

我有一个比例矢量图像,我希望它填充一个容器.关于SO有几个这样的问题,尽管它们有点老了.例如. Stretch and scale CSS background

但是,当我试图实施这样的解决方案时,结果令人失望.

例如：

body  {

    margin: 0; 
    padding: 0;
    text-align: center; 
    color: #000;
    background-color: #000
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 100%;

}

...

.twoColLiqLtHdr #container {
    width: 80%;
    margin: 0 auto; 
    border: 2px solid #000000;
    text-align: left; 
    background-color: #003;
    background-image: url('background_image.svg'); 
    /*background-position: 80% 80%; */

  background-repeat: no-repeat; 
    color: #000;
    font-family: "Times",cursive;


    background-attachment:fixed;
    min-height:100%;
    /*top: 0;
    left: 0; */



}

我已经尝试过各种各样的安排,但我不能让它伸展而不留空白区域(重复是成功的,但看起来很可怕).

但是,由于我正在使用svg我可能以错误的方式接近这个,我应该在html中使用svg xmlns标签吗？ (P.S.我知道IE8绝对无法处理svgs)

解决方法

你有没有尝试过

background-size:cover;

检查一些examples.

我遇到了webkit,background-size：cover和SVG背景图片的问题.我解决了这个问题

-webkit-background-origin:border;

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!