在CSS中拉伸背景图像[重复]

Posted 2023-03-05

【中文标题】在CSS中拉伸背景图像[重复]

【英文标题】：Stretch a background image in CSS [duplicate]

【发布时间】：2012-09-02 04:03:02

【问题描述】：

可能重复：Stretch and Scale a CSS image Background - With CSS only

一个初学者的问题： 这可能是一个基本问题，我可能会遗漏一些基本想法。我已经看到了这个问题，但我认为这与我的问题不相关。我想在 CSS 中拉伸我的背景图像。这是我的 CSS 代码CSS:

.BackgroundColor

    background-position: center center;
    margin: 0px 0px 0px 0px;
    background-image: url('Content/Tulips.jpg');//this image i want to stretch
    background-repeat: no-repeat;
    width: 1000px;
    height: 1000px;
    padding: 0px 0px 0px 0px;

这是我的 html 代码 HTML:

<div class="BackgroundColor">
    <div class="outerMost">
    <div class="heading" id="loginheading">
      Show Login  
    </div>
    <div class="MainSect">
        <div class="Label">
        <asp:Label ID="usernameLabel" runat="server" Text="UserName" ClientIDMode="Static"></asp:Label>
        </div>
        <asp:TextBox ID="UsernameTextBox" runat="server" CssClass="textboxes" ClientIDMode="Static"></asp:TextBox>
        <br />
        <asp:Label ID="PasswordLabel" runat="server" Text="Password" CssClass="Label" ClientIDMode="Static"></asp:Label>
        <asp:TextBox ID="TextBox2" runat="server" CssClass="textboxes"></asp:TextBox>
        <br />
        <asp:Button ID="LoginButton" runat="server" Text="Login"  
            BackColor="#00CCFF" BorderStyle="Solid" CssClass="loginButton" ClientIDMode="Static" />

    </div>
    <br />
    <br />
    <div>
        <asp:Label ID="Label1" runat="server" Text="Date of Birth" CssClass="Label"></asp:Label>
        <asp:TextBox ID="CalenderTextBox" runat="server" ClientIDMode="Static" CssClass="textboxes"></asp:TextBox>
    </div>
    <div id="tabSection">
        <ul>

            <li><a href="#basicInfo">Basic info</a></li>
            <li><a href="#Products">Products</a></li>
            <li><a href="#SavingAccount">Depositer</a></li>
        </ul>
        <div id="basicInfo">
        Basic Info will be mentioned here and bla bla bla
        </div>
        <div id="Products">
        Products and other releases should be mentioned here

        </div>
        <div id="SavingAccount">
        Information about saving account should be mentioned here and bla bla bla
        </div>
    </div>
    </div>
    </div>

所以我想在页面上设置背景图像。忽略内部代码。请帮助我拉伸图像，因为我的Style builder 没有显示任何关于拉伸图像的属性。我提到的上述链接是在 Html 中拉伸图像，但我想在 CSS 中进行。编辑： 请告诉我如何在 Visual Studio 中包含 CSS3，因为我的 CSS 编辑器最多显示 CSS2.1 谢谢

【参考方案1】：

我想这就是你要找的：

background-size: 100%;

【讨论】：

是的，我想这样做，但编译器的编译器智能没有显示。我认为这是 CSS3 的一个属性，但我无法在项目中包含 CSS3，因为我是第一次使用它

【参考方案2】：

在背景图像处拉伸图像应为 100%" 在你的 css 我们把 px 改成 % 还添加背景大小 = 100% 你的 CSS 变成了

.BackgroundColor

background-position: center center;
margin: 0px 0px 0px 0px;
background-image: url('Content/Tulips.jpg');//this image i want to stretch
background-size: 100%;
background-repeat: no-repeat;
width: 100%;
height: 100%;
padding: 0px 0px 0px 0px;

【参考方案3】：

在 CSS3 中，您可以简单地使用 background-size: cover 记录的 here。

cover：缩放图像，同时保留其固有纵横比 （如果有的话），最小尺寸，使得它的宽度和高度 可以完全覆盖背景定位区域。

否则请参阅此answer。

【讨论】：

你成就了我的一天！

【参考方案4】：

你可以使用背景尺寸：

http://www.w3schools.com/cs-s-ref/css3_pr_background-size.asp

这是一个演示：

http://www.w3schools.com/cs-s-ref/tryit.asp?filename=trycss3_background-size2

background-size:100%;

【参考方案5】：

用途：

  background: url(yourimage.jpg) no-repeat;
  background-size: 100%;

应该可以的。

【参考方案6】：

我会使用 100% 的宽度和高度。

【参考方案7】：

只是为了其他人遇到同样问题时会发现它。因为 SO 用户没有回答我的部分问题。我已经搜索并找到了答案，所以我正在回答那部分 这是任何人都可以下载 CSS3 智能感知架构的链接。http://visualstudiogallery.msdn.microsoft.com/7211bcac-091b-4a32-be2d-e797be0db210 安装后，Visual Studio 将在 CSS 编辑器中显示 CSS3，你可以从那里选择它。然后使用属性

background-size: 100%;

【讨论】：

背景尺寸：包含；背景重复：不重复；更漂亮？