使用CSS背景图像实现响应式图片

Question

我正在尝试找到最佳方法来创建一个响应式图像，以适应整个div容器的背景。还有两个文本框，它们具有rbga值，需要与图像的某些部分完全对齐。

我想知道是在HTML中使用z-index并将图像放置在其中更好，还是将图像保留在CSS中作为背景图像？

目前，对于我的其他图像，我正在使用JavaScript、jQuery和PHP调整位于HTML中的图像大小。我还使用媒体查询来调整我的页面。我试图不使用三个图像，但也许这是我最好的选择？

以下是我已经完成的内容。我已删除了额外的代码，以避免混淆。我还附上了我想要实现的jpg。我可以使段落div对齐，但无法使其与图像响应式匹配。

<section id="content" role="main" class="cf">
   <div class="mission">
       <h1>We are What We Create</h1> 

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero odio, 
         gravida sedconsequat a, faucibus dignissim</p>
     </div>

   </section>

CSS
.mission {
  background-image:url(../images/gallery_banner.jpg);
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
}

.mission p {
    color: #fff;
    text-align:center;
    text-shadow: 2px 1px 1px  #4c4341;
    background: rgba(81,118,131, .9);
    width: 100%;
    margin: 0 auto;
    margin-top: 220px;
    margin-bottom:5%;
}

.mission h1 {
    font-weight: bold;
    font-size: 120%;
    color: #fff;
    text-shadow: 2px 1px 1px  #4c4341;
    background: rgba(81,118,131, .9);
    letter-spacing:.1em;
    text-align: center;


}

以下是我试图做的照片合成效果的链接：
https://docs.google.com/file/d/0B_TAmXXa2n8OUXJ2LVd0SFZwQVk/edit?usp=sharing

- lookingGlass

Answer 1

我会将图片放入html中，并使用css样式使其适应容器。

<div id="container"><img src="http://i35.tinypic.com/69kdw8.jpg" border="0" alt="Image and video hosting by TinyPic"><div id="d1">Test</div><div id="d2">Test test2</div></div>

并对其进行样式设置：

#container {
    position:relative;
}
#d1, #d2 {
    position:absolute;
    background-color:green;
    opacity:0.7;
    color:white;
}
#d1 {
    height:16%;
    width:39%;
    bottom:0;
    left:0;
}
#d2 {
    height:68%;
    width:29%;
    top:0;
    left:58%;
}

http://jsfiddle.net/RuwRU/

- dimi boy

Answer 2

这是我为了实现您的图片所示内容的一致性而采取的方法（这是我的解释）。我绝不是专家，也不知道这是否是最佳解决方案。但是请看下面的方法：将边距和尺寸以百分比计算，因为在较小的比例下显示时会保持一致。

对于最左边的框中的“Lorem ipsum dolor”：
11 / 1280 = 0.085 -> 0.8％（margin-left）
295 / 350 = 0.842 -> 84.2％（margin-top）
494 / 1280 = 0.385 -> 38.5％（width）
49 / 350 = 0.154 -> 15.4％（height）

然后将这些CSS规则附加到定位在“header image div”内部的文本包装器中。

#wrapper { /* Wrapper for Left text */
    position: relative;
    top: 84.2%;
    left: 0.8%;
    width: 38.5%;
    height: 15.4%;    
}

请参考这个 jsfiddle 的示例。祝你好运！

- jjjjjjjjjjjjjjjjjjjj