响应CSS背景图像

简单的概念，我想有可以扩展在1一个响应CSS背景图像：在浏览器窗口内1宽度/高度比，这是容易的部分响应CSS背景图像

body{ 
    height:100%; 
} 

.banner{ 
    height:100%; 
    background: url('path/to/img') center center no-repeat; 
    background-size:contain; 
} 

<body> 
    <div class="banner"></div> 
</body>

的问题是，我也希望把自动换行背景容器内的文字，并具有背景图像流高度明智的一个浏览器窗口大小调整文字的高度。

<body> 
    <div class="banner"> 
     <p> 
      Lorem ipsum dolor sit amet, in eos idque epicuri... 
     </p> 
    </div> 
</body>

这是纯粹的CSS/HTML可能吗？

来源

2013-11-02 dcd0181

我“米不能确定你的意思是什么‘流高度智慧与文本’......你想要的文字缩放呢？ –

是啊，所以我想文本流（套）以及背景图片我认为我需要使用媒体查询，但是如何确定文本开始包装的分辨率？ – dcd0181

下面是一个很好的示例：http：// spring。io/ – dcd0181

背景图像做背景

的方法之一是使用每个background-size: cover为this post：

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

文本

要做到文字，你可以看看使用@media查询，BU T作为你选择的答案，我会留下，其余高达你们:)

来源

2013-11-02 20:06:07

试试这个：

HTML：

<div class="banner"> 
    <img src="https://www.google.es/images/srpr/logo11w.png" /> 
    <div class="content"> 
     Content 
    </div> 
</div>

CSS：

.banner { 
    position: relative; 
} 
.banner > img{ 
    width: 100%; 
    height: auto; 
} 
.banner > .content{ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    overflow: auto; 
}

Demo

来源

2013-11-02 19:54:17 Oriol

我可以迭代这个，谢谢！ – dcd0181

我认为它可以帮助你http://www.positioniseverything.net/easyclearing.html。我解决我的问题像它通过清除。

来源

2013-11-02 19:58:01

基于关闭的答案，任何人谁是有兴趣的，按比例与文字环绕缩放CSS背景图片，下面的应在大多数情况下工作。

参见fiddle

首先，以确保所述背景图像不呈现比移动分辨率越大，我添加了一个视口

@media screen and (max-width: 800px){ 
    .viewport { 
     position:absolute; 
     right:0; 
     left:0; 
     top:0; 
     bottom:0; 
     overflow-x:hidden; 
     overflow-y:scroll; 
    } 
} 

<html> 
<body> 
    <div class="viewport"> 
     <!-- background image --> 
    </div> 
</body> 
<html>

然后我使用的background-size:cover;属性与auto上的高度背景元素以允许它在文本环绕在移动设备上流动。为了允许背景元件的高度重新大小相对于文本换行，它的父（在这种情况下，body），必须有100%的高度。

html,body{ 
    height:100%; 
} 

.banner{ 
    background: url('path/to/banner.jpg') center center no-repeat; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

@media screen and (max-width: 800px){ 
    .viewport { 
     position:absolute; 
     right:0; 
     left:0; 
     top:0; 
     bottom:0; 
     overflow-x:hidden; 
     overflow-y:scroll; 
    } 

    .banner{ 
     height:auto; 
    } 

    .banner .banner-container { 
     position:relative; 
     overflow:hidden; 
    } 
} 

<html> 
<body> 
    <div class="viewport"> 
     <div class="banner"> 
      <div class="banner-container"> 
       <h1>Lorem ipsum dolor sit amet, est intellegebat definitionem at</h1> 
       <h1>Lorem ipsum dolor sit amet, est intellegebat definitionem at</h1> 
       <h1>Lorem ipsum dolor sit amet, est intellegebat definitionem at</h1> 
      </div> 
     </div> 
    </div> 
</body> 
<html>

来源

2013-11-02 21:41:49 dcd0181

响应CSS背景图像

回答

相关问题