html - CSS:插入具有宽度属性的背景图像:100％并在图像中间有文字

Question

我翻遍了堆栈，还没有找到解决方案

我正在尝试插入具有属性的背景图像 (1318 x 690)

.bgImage {
 background-image: url('../img/background.jpg');
 width: 100%;
 text-align: center;
 }

首先，没有显示完整图像。它只有大约 30 像素高和 100% 宽度。使文本水平对齐很容易 text-align:center 我认为 vertical-align: middle。

有没有一种方法可以最大程度地显示图像。我想要做的是在显示它的窗口(手机、桌面和平板电脑)上制作图像形状。我认为它没有显示，因为元素内没有内容。使用 HTML 的 img 会更好吗？

Answer 1

老实说，我会采用这种方法:

.bgImage {
   background-image: url('../img/background.jpg') no-repeat center center;
   background-size: cover;
   text-align: center;
 }

对于文本(假设它是一个 h1)，我会这样做(不过要确保容器具有相对位置):

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

如果你的背景图像没有跨越高度因为它的内容没有填充它，你总是可以使用这个快速的 jQuery 技巧:

jQuery(function($) {
  $win = $(window).height();
  $('.wrapper').height($win);
});

编辑:如果你需要它响应，以防万一，你也可以绑定(bind)它来调整大小:

jQuery(function($) {
  $(window).bind("load resize", function() {
    $win = $(window).height();
    $('.wrapper').height($win);
  });
});

这只是将主容器(无论是 .container 还是 .wrapper 或其他)的高度设置为浏览器窗口的全高。

希望这对您有所帮助。