html

Question

我正在尝试设置屏幕的图像中心，并且图像的尺寸不如整个屏幕大。如何使背景色看起来像图像的一部分？从而产生图像全屏的错觉？

我尝试使用图像的颜色并将其设置为背景颜色，但是仍然不匹配。

html

  <section class="container">
    <img class="bg-img" src="../assets/beauty-bg-img.jpg" alt="background image">
  </section>

css

.container {
    background-color: #F3D5DB;
}

可以看出，图像居中，但是图像和背景颜色却并不一致。

这怎么办？

Answer 1

背景色是纯色的，但是您选择的图像具有非常小的渐变。若要查看此内容，请查看图像的顶部和底部以查看此内容。图像比顶部的背景更亮，屏幕的底部更暗。

您可以使用gradients来解决此问题，但这需要反复试验。

Answer 2

有几种方法可以做到这一点。

您可以将图像设置为主体或包装div上的背景，并将background-size属性设置为cover。

或者，您可以在代码顶部创建一个独立的div，将其设置为position:fixed;top:0;left:0;width:100vw;height:100vh; （将图像设置为视口的完整大小）和{{1} } （将其放在其他div下方）。这是一个很好的效果，因为您还可以添加z-index:-1或类似的东西来使图像“暗淡”一点，而其余的网页会覆盖图像。

以下是一些关于您可以做什么的好文章：

https://www.smashingmagazine.com/2013/07/simple-responsive-images-with-css-background-images/

https://www.smashingmagazine.com/2009/03/backgrounds-in-web-design-examples-and-best-practices-2/

https://css-tricks.com/perfect-full-page-background-image/

https://www.webfx.com/blog/web-design/responsive-background-image/

https://www.taniarascia.com/background-position-fixed-and-cover-with-css/

Answer 3

与此相关的方法有很多。您可以完美地匹配渐变，将图像设置为背景并使其覆盖页面。渐变真的很难完美匹配，而您没有要求第二个。我的解决方案是使用一些简单的CSS和免费的照片编辑器。（您不必进行任何照片编辑，我就有图像）。我从原始图像的顶部和底部获取了颜色，然后设置了一个CSS渐变。 background-image: linear-gradient(#F4DAE2, #EED5DC, #EED1D8);超级简单！然后，您只需将身体的min-height属性设置为100vh，就不会重复。我们使用paint.net或photoshop以渐变模式擦除图像的边缘。任何人都可以做到。您可以从https://i.ibb.co/0BbJ6bb/face.png获取渐变图像文件。我们将该图像放在页面的中央，一切都很好地融合了！已经快一年了，所以请标记此答案或另一答案作为解决问题的解决方案。谢谢！

此处的演示页面：https://stackoverflowanswer.glitch.me/

img {
  height: 100vh;
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 50%;
  transform: translate(-50%, 0%);
  opacity: 1;
}

body {
  overflow: hidden;
  background-image: linear-gradient(#F4DAE2, #EED5DC, #EED1D8);
  min-height: 100vh;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>html - How to make background line up with image</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>  
  <body>
    <img src="https://i.ibb.co/0BbJ6bb/face.png">
  </body>
</html>

Answer 4

您可以尝试使用“混合混合模式”，图像的背景颜色将与父图像的背景颜色匹配。

请注意，这可能不适用于您的图像，因为您使用的是渐变色，否则可能会仅用一种颜色替换渐变色。

它与某些浏览器也不兼容。

.container {
    background-color: #F3D5DB;
}

.bg-img {
    mix-blend-mode: darken;
}

检查this以获得更多选项。

如何使背景颜色与图像相同？

html

css

4 个答案: