Html 在 CSS 中拉伸背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12332191/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stretch a background image in CSS
提问by Rafay Zia Mir
Possible Duplicate:
Stretch and Scale a CSS image Background - With CSS only
可能的重复：
拉伸和缩放 CSS 图像背景 - 仅使用 CSS
A beginner question:
This might be a basic question and i could be missing some basic idea. I have seen This question but i think that is not near to my problem. I want to stretch my Background image in CSS. Here is my CSS code
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;
}
and here is my HTML code
HTML:
这是我的 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>
So i want to set background image on the page.Ignore the inner code. Kindly help me stretching the image because my Style builderdoes not show any property regarding stretching the image. The above link i mentioned is stretching the image in Html but i want to do it in CSS.
EDIT:And please tell me how to include CSS3 in visual studio because my CSS editor shows upto CSS2.1
Thanks
所以我想在页面上设置背景图像。忽略内部代码。请帮助我拉伸图像，因为我Style builder没有显示任何有关拉伸图像的属性。我提到的上述链接是在 Html 中拉伸图像，但我想在 CSS 中进行。
编辑：请告诉我如何在 Visual Studio 中包含 CSS3，因为我的 CSS 编辑器显示为 CSS2.1
谢谢
采纳答案by Rafay Zia Mir
just for the sake that others would find it if they get the same problem. Because some part of my question was not answered by SO users. I have searched it and found the answer so i am answering that part
this is the link where anyone can download the CSS3 intellisense schema.
http://visualstudiogallery.msdn.microsoft.com/7211bcac-091b-4a32-be2d-e797be0db210
After installing it Visual Studio will show CSS3 in CSS editor u can select it from there. and then Use the property
只是为了其他人在遇到同样的问题时会发现它。因为我的问题的某些部分没有被 SO 用户回答。我已经搜索过它并找到了答案，所以我回答了这一部分，
这是任何人都可以下载 CSS3 智能感知架构的链接。
http://visualstudiogallery.msdn.microsoft.com/7211bcac-091b-4a32-be2d-e797be0db210
安装后，Visual Studio 将在 CSS 编辑器中显示 CSS3，您可以从那里选择它。然后使用属性
background-size: 100%;
回答by Michal Klouda
In CSS3 you can simply use background-size: coverdocumented here.
在CSS3，你可以简单地使用background-size: cover记录在这里。
cover: Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.
cover：在保留其固有纵横比（如果有）的同时，将图像缩放到最小尺寸，使其宽度和高度都可以完全覆盖背景定位区域。
Otherwise see this answer.
否则请参阅此答案。
回答by Tim Withers
I think this is what you are looking for:
我认为这就是你要找的：
background-size: 100%;
回答by luke
You could use background-size:
您可以使用背景大小：
http://www.w3schools.com/cssref/css3_pr_background-size.asp
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Here is a demo of it:
这是它的演示：
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background-size2
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background-size2
background-size:100%;
回答by rgamber
Use:
用：
background: url(yourimage.jpg) no-repeat;
??background-size: 100%;
That should work.
那应该工作。
回答by Kaushal
for stretching image at background image should be 100%" in your css us put px change it to % also add background size = 100% your css become
为了在背景图像上拉伸图像应该是 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;
}
}
回答by abDesigns
I would use a width and height of 100%.
我会使用 100% 的宽度和高度。
