Question

目前我的Site（城市显示的第一张图片）上贴有一张1920 x 1080的image / img标签。

我现在想要在图片上设置一个<p>一个<button>和一个可点击的电话号码，以便我知道我必须将其转换为<div>并使用图像作为背景。

当我在div上尝试background:url(image/Houston_remodeling.jpg) center no-repeat;以实现在调整浏览器大小时显示/缩放图像的方式（在当前网站上，gulfstate.us），图像显示为放大到顶角，看起来不漂亮。

如果有人可以请求帮助我会非常感激。我是新手，所以让我知道我需要提供什么，我会立即发表评论。

非常感谢你的帮助！

Answer 1

试试background-size: cover; 来自规范

将背景图像缩放为尽可能大背景区域完全被背景图像覆盖。一些部分背景图像可能不在背景中定位区域

Answer 2

做了一些修改以下工作正常，

用你的img标签替换它。但它是一个黑客，最好使用css background-size

<div style="position:realtive;left:0;top:0">
   <div style="position: relative;top:0;z-index: 1;">
      <img class="headimg" src="image/Houston_remodeling.jpg">
   </div>
   <div style="position:absolute;top: 100px;left: 50%;z-index: 2;">
    9999999999999999999999999
    </div>
 </div>

Answer 3

正如我们在这里猜测的那样，我只会随机猜测一下。

这种方式正在使用background-size: cover;，正如我写的那样，我看到有人已经提出过这个问题但是我有一个例子，我可以继续。

HTML：

<div id="header">
    <p>This is test text</p>
    <p><a>Phone Number: 0000-00000</a></p>
    <button>Test button</button>
</div>

CSS：

html,body {
    width: 100%;
}
#header {
    width: 100%;
    max-height: 600px;
    min-height: 400px;
    position: relative;
    z-index: 9998;
    background: url(http://www.3dwallz.com/wp-content/uploads/2013/08/21/ice-city-lake-wallpapers-x.jpg) center no-repeat;
    background-size: cover;
}

看一下，看看你是否希望它对调整大小做出反应，如果没有反馈则提供反馈，我们将再次进行反馈。

DEMO HERE

注意： 在查看您链接到的网站后，我建议您使用此方法作为div背景。它更清洁，整体看起来更专业。

Answer 4

快速演示你需要根据你的设计调整css， www.jsfiddle.net/jKnbL

我在设置这个div时遇到了麻烦

4 个答案:

HTML：

CSS：