Question

我想像这个网站的背景虽然我的图像很大但我不知道如何根据我的浏览器大小调整它。我还想要这张照片有相同的滤镜/效果吗？

Answer 1

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

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

Answer 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元素，然后单击inspektor（此处为Element Untersuchen）

现在您可以在右侧网站上看到该元素的CSS样式：

用巨型照片创建图像背景

2 个答案: