Question

我能够在桌面上显示图像上的内容，但是当我调整浏览器大小时，我的内容显示不正确。问题是如何设置完整内容的背景图像？请检查我的下图，你会明白我在问什么？我的背景图片高度为500px。你能帮帮我吗？

提前致谢。

＆＃13;

html, body
{
  margin: 0;
  padding: 0;
  height: 100%;
}

p{
  color: red;
}
.test-1
{
  background-image:url('images/images-bg.png');
  background-repeat: no-repeat;
  width: 100%;
  height: auto !important;
  background-position: center;

}

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="test-1">
    <div class="container">
      <div class="row">

        <div class="col-md-6">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p>
        </div>

         <div class="col-md-6">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p>
                       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p>

        </div>



      </div>
    </div>
  </div>

＆＃13;

在桌面这里没有问题

调整大小后

Answer 1

只需编辑CSS，然后添加background-size

即可

.test-1 {
  background-image:url('images/images-bg.png');
  background-size:cover;
  background-repeat: no-repeat;
  width: 100%;
  height: auto !important;
  background-position: center;
}

您可以在HERE

中详细了解background-size

Answer 2

删除宽度100％并设置background-size：cover并删除html，body部分。您使用引导程序，因此您无需定义它

p {
  color: red;
}

.test-1 {
  background: url(http://www.hollanders.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/s/i/sil370523644_1_2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="test-1">
    <div class="container">
      <div class="row">

        <div class="col-md-6">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p>
        </div>

         <div class="col-md-6">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p>
                       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p>

        </div>



      </div>
    </div>
  </div>

如何在移动设备中显示背景图片上的完整内容？

2 个答案: