用巨型照片创建图像背景答案

【问题标题】：Creating image background with giant photo用巨型照片创建图像背景
【发布时间】：2026-02-20 08:55:02
【问题描述】：

我想要一个像这个网站一样的背景，虽然我的图片很大，但我不知道如何调整它以适应我的浏览器大小。我也想要这张照片的滤镜/效果？

【问题讨论】：

我可能会使用 CSS background-size 属性。我们可以查看您的代码以及具体出了什么问题吗？

【解决方案1】：

div.class {
  background-image: url("your_image.png");
  background-size: cover;
  background-repeat: no-repeat;
}

将它添加到您想要背景图像的 div 中。

【讨论】：

【解决方案2】：

使用这样的代码，相同的图像，相同的效果：

<!DOCTYPE html>
<html>
<head>
    <style>
        html, body{
            height: 100%;
            width: 100%;
            margin: 0px;
        }

        .element {
            background: -webkit-linear-gradient(rgba(77, 29, 33, 0.43), rgba(0, 0, 0, 0.32)), url('http://strategiclawyers.ca/img/img1.jpg');
            background: linear-gradient(rgba(77, 29, 33, 0.43), rgba(0, 0, 0, 0.32)), url('http://strategiclawyers.ca/img/img1.jpg');
            background-repeat: repeat, repeat;
            background-size: auto auto, auto auto;
            background-repeat: no-repeat;
            background-size: cover;
            height: 100%;
        }
    </style>
</head>
<body>

<div class="element"></div>

</body>
</html>

但在你问下一个问题之前，请先尝试一下。

一个很好的工具是在 Firefox / Chrome / ...上使用 Inspektor ...

要使用此点击页面上的 html 元素并点击检查器（此处为 Element Untersuchen）

现在您可以在正确的站点上看到元素的 css 样式：

【讨论】：