4

可能重复：
拉伸和缩放 CSS 图像背景 - 仅使用 CSS

初学者问题：这可能是一个基本问题，我可能会遗漏一些基本想法。我已经看到了这个问题，但我认为这与我的问题不相关。我想在 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
谢谢

4

7 回答 7

8

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

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

否则请参阅此答案。

于 2012-09-08T15:55:03.887 回答
6

我认为这就是你要找的：

background-size: 100%;
于 2012-09-08T15:53:27.613 回答
3

你可以使用背景尺寸：

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

这是它的演示：

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background-size2

background-size:100%;
于 2012-09-08T15:55:35.953 回答
2

采用：

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

那应该行得通。

于 2012-09-08T15:55:46.213 回答
1

对于在背景图像上拉伸图像应该是 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;

}

于 2012-09-08T15:54:54.663 回答
1

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

background-size: 100%;
于 2012-09-08T17:09:39.600 回答
0

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

于 2012-09-08T15:58:31.477 回答