3

我试图找出创建响应式图像以适应 div 容器的整个背景的最佳方法。还有两个文本框的 rbga 值需要与图像的某些部分完全内联。

我想知道是否最好做 az index 并将图像放在 html 中或将图像保留在 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;


}

链接到我正在尝试做的 Photoshop 图像：
https ://docs.google.com/file/d/0B_TAmXXa2n8OUXJ2LVd0SFZwQVk/edit?usp=sharing

4

2 回答 2

2

如果调整大小（这就是我解释它的方式），我将采取以下措施来实现您的图像所暗示的一致性。我绝不是专家，我不知道这是否是最好的解决方案。但是这里有：以百分比测量边距和尺寸，因为如果以较小的比例显示，它将保持一致。

对于最左边的框说“Lorem ipsum dolor”：
11 / 1280 = 0.085 -> 0.8%（左边距）
295 / 350 = 0.842 -> 84.2%（边距顶部）
494 / 1280 = 0.385 -> 38.5%（宽度)
49 / 350 = 0.154 -> 15.4%（身高）

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

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

例如，请参见这个 jsfiddle。

祝你好运！

于 2013-04-19T23:24:59.587 回答
2

我会将图像放入 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/

于 2013-04-20T01:02:02.363 回答