我有一个大图像用作background-image页面.我想要的是图像的高度将被拉伸以填充页面的高度.它也应该集中.
background: black url("/image/background.jpg") no-repeat fixed center;
我知道Oldie但是好东西.这个问题被问了很多次,但我没有得到明确的答案.可伸缩的背景图像,最好只有CSS,如果必须的话,愿意使用jQuery支持.我遇到的一个问题(即使用CSS3背景图像)是图像下方的空白空间,当它的高度小于浏览器窗口高度时.(例如:http://css-tricks.com/examples/ImageToBackgroundImage/)
这就是我想要完成的事情:
以下是一些说明这些目标的例子(尽管我认为可以做得更好):
谢谢你,谢谢你,谢谢你.
我的 div 元素中有这个背景图像，我希望它向上/向下“填充”并覆盖其整个高度和宽度。请向我解释如何使用 CSS 实现这一点。非常感谢任何帮助。提前致谢。
如何使用CSS缩放背景图像？图像附加CSS,我想缩放它以适应一定的宽度
可能重复:
拉伸和缩放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" …如何防止背景重复？目前它重复了两次，但我需要背景来填充整个页面而不重复（否则它看起来很奇怪！）。下面是我的代码，但如果需要，我可以提供站点链接。
HTML
<div class="container">
<img src="box.png" style="float: left;" />
<div class="navrow">
<ul>
<li class="navmenu" style="background: #6dc066;"><a href="index.php">Home</a></li>
<li class="navmenu" style="background: #a155e7;"><a href="about.php">About</a></li>
<li class="navmenu" onclick="shakeregister();" style="background: #ffa500;">Register</li>
<li class="navmenu" style="background: #3399ff;"><a href="play.php">Login</a></li>
<li class="navmenu" style="background: #ff6666; margin-right: 0px;"><a href="contact.php">Contact</a></li>
<div style="clear: left;"></div>
</ul>
</div>
<div style='clear:both'></div>
</div>
CSS
body {
font-family: Titillium Web, sans-serif;
background-image: url("images/polarvillebg.png");
}
h1, h2, h3 {
font-weight: normal;
}
.container {
width: 70%;
margin: 0 auto;
margin-top: 2%;
}
.navrow {
float: right;
text-align: center; …所以我有一个带背景图像的div; 这个div可以根据div的空间内容/大小增加高度和宽度.
但是,无论我希望背景图像的大小是100%显示,这是因为背景图像周围有边框,我需要显示那些按钮效果.
div.leadgen {
background: url(/Website6/Styles/leadgen_center.png) repeat-x;
color: #FFF;
cursor: pointer;
display: inline-block;
}
<div class="leadgen">
<h3>
This is the title
</h3>
This is the description
</div>
编辑
#solutionsNav div.leadgen {
background:url(/images/leadGen_bg2.png) no-repeat;
background-size: 100% 100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/leadGen_bg2.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/leadGen_bg2.png', sizingMethod='scale')";
behavior: url(/scripts/PIE.htc);
padding: 10px;
color: #FFF;
cursor: pointer;
}
这适用于所有浏览器!我唯一需要弄清楚的是在IE 7和8中我不想使用background:url(/images/leadGen_bg2.png)no-repeat; 因为它似乎加倍了.
我似乎无法将我的背景图像垂直拉伸(使用CSS)并且无法获得它.如果不使用jquery插件,最好的方法是什么？
目前有
div#whitewrap {position:fixed; top:0; left:0; width:100%; height:100%;}