背景图像不会 100% 向右移动 [重复]

Posted 2023-03-06

【中文标题】背景图像不会 100% 向右移动 [重复]

【英文标题】：background-image does not go 100% to the right [duplicate]

【发布时间】：2012-11-30 15:36:09

【问题描述】：

所以我的问题是我需要我的导航栏背景图像以明智地走完页面宽度的整个距离。这是一个小提琴：http://jsfiddle.net/faytAlvein/FDVby/4/ 导航下的黑色很好忽略这一点。这在原版中不存在，因为它是不同的背景图像。只是宽度是问题。无论窗口大小如何，它都需要缩放 100% 的页面。如果有帮助的话，真实的背景图片是 1145x144。

    <div id="navbar" >
        <div id="links" >
            <a href="thisindexpage.php" class="navLink" >Home</a>
            <a href="aboutUs.html" class="navLink" >About Us</a>
        </div>
    </div>​

navbar.css

#navbar

background-image: url('../images/nav.png');
background-repeat: no-repeat;
background-color: black;


#links

font-size: 20px;
font-family: helvetica;
padding-top: 25px;
padding-bottom: 94px;
margin-left: 150px;

【参考方案1】：

您可以使用 background-size 属性将背景图片“拉伸”到 100%。

background-size: 100%;

你的 CSS：

#navbar 
   background-image: url('../images/nav.png');
   background-repeat: no-repeat;
   background-color: black;
   background-size: 100%;

http://jsfiddle.net/FDVby/7/

【讨论】：

不知道当我在谷歌搜索时我是怎么错过的，但那会做到的。谢谢

【参考方案2】：

使用背景尺寸属性 这是文档：https://developer.mozilla.org/en-US/docs/CSS/background-size