HTML – 需要空背景与背景图像强制高度,必须响应

前端之家收集整理的这篇文章主要介绍了HTML – 需要空背景与背景图像强制高度,必须响应前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要以下内容

>没有内容的emtpy div
>背景图像设置为div
>背景图像流畅/响应重新大小我无法设置固定
> div上的尺寸

我尝试的所有内容都无法强制div打开以支持背景图像的大小.任何帮助是极大的赞赏…

http://www.everymountain.us/

<header id="header">
<div class="wrapper">
<div class="inner">
<div class="top_banner"></div>
</div>
<div class="clear"></div>
</div>
</header>

.front #header .top_banner { background: url('images/bg_front.jpg') no-repeat;   background-size: cover; }

解决方法

将高度的纵横比锁定到其流体宽度的方法是使用填充顶部或填充底部百分比.这是因为所有填充百分比都是元素容器的宽度.你的背景图片是960 x 520,所以高度是54.166666666667%.

HTML

<div class="top_banner"></div>

CSS

.top_banner {
    background-image: url('images/bg_front.jpg');
    background-size: 100%;
    width: 100%;
    padding-top: 54.166666666667%;
    height: 0;
}

示例:http://jsfiddle.net/SsTZe/156/

基本上是同一个问题:CSS fluid image replacement?

猜你在找的HTML相关文章