在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中拉伸背景图像[重复]的主要内容,如果未能解决你的问题,请参考以下文章