dcd*_*181 4 html css html5 css3 word-wrap
简单的概念,我希望有一个响应式CSS背景图像,在浏览器窗口中以1:1的宽度/高度比例缩放,这是容易的部分
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有可能吗？
Ric*_*eck 18
背景图片
做背景的一种方法是background-size: cover按照这篇文章使用:
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查询,但是当你选择了答案时,我会把剩下的留给你们:)