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

Posted

技术标签:

【中文标题】在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%;

【讨论】:

背景尺寸:包含;背景重复:不重复;更漂亮?

以上是关于在CSS中拉伸背景图像[重复]的主要内容,如果未能解决你的问题,请参考以下文章

CSS背景-图像拉伸高度[重复]

使用CSS设置背景图像大小而不拉伸[重复]

在css中设置图片的背景图,怎么设置图片纵向拉伸

如何使用 CSS 拉伸表格单元格的背景图像?

DIV+CSS,怎样将背景图片拉伸到全屏!! 谢谢各位了 急呀~~~

(网页制作 Dreamweaver) 如何实现: 背景图片拉伸??