定义固定图像不会影响它并使其具有响应性答案

【问题标题】：Defining fixed image doesn't affect it and makes it responsive定义固定图像不会影响它并使其具有响应性
【发布时间】：2021-02-01 01:36:17
【问题描述】：

我的 css 样式表中有以下规则：

body {
    background: url('../Pic/poly-parallax Half.png') fixed center no-repeat;
    background-color: rgb(231,231,231);
    width: 100%;
    background-size: contain;
    background-position: left;
}

.logo {
    height: 275px;
    background: url('Pic/Logo.png') fixed center no-repeat;
    background-size: 275px 70px;
    background-position: top right;
}

虽然我将其定义为固定的，但徽标图像仍保持响应。

这是 HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="BSC1.css">
    <title></title>
</head>
<body>
    <div class="logo">
    </div>
</body>
</html>

例子：

放大 100%：

放大 200%：

【问题讨论】：

我没有看到它有响应，我在 jsfiddle 中尝试过。您如何看待响应式响应？
在固定身体图像时缩放 +/- 调整徽标大小
jsfiddle.net/2ukt6z7w 调整大小时我没有看到图像有任何变化。
我使用 Visual Studio 编码
我也是，但我链接了您的代码示例，以便您可以看到我看到的内容。

标签： html css responsive-design background-image background-position

【解决方案1】：

您可能想要更改的唯一一件事是 body 的背景大小从 contain 到 cover 以真正填满窗口（就像我在下面所做的那样），但徽标确实不使用这些设置更改其大小并始终保持在右上角：

body {
  margin: 0;
  height: 100%;
  background: url('https://placehold.it/1200x800/fa0') fixed center no-repeat;
  background-color: rgb(231, 231, 231);
  width: 100%;
  background-size: cover;
  background-position: left;
}

.logo {
  height: 275px;
  background: url('https://placehold.it/275x70/a0f') fixed center no-repeat;
  background-size: 275px 70px;
  background-position: top right;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="BSC1.css">
  <title></title>
</head>

<body>
  <div class="logo">
  </div>
</body>

</html>

【讨论】：

我的图像完全符合我在 css 上定义的方式。改变它会破坏分辨率。正如我所写，图片是固定的，所以它看起来很完美，因为它必须只在屏幕的左侧。
问题仅在于第二张图片（徽标）在 html 页面上放大和缩小时会自行调整大小。
嗯，缩放（在浏览器中）总是意味着一切都被缩放了——你不能改变它。它有什么问题？
你错了。您可以将其定义为固定（就像我对背景图像所做的那样），即使您放大和缩小它也不会自行调整大小。它与我的背景图片完美搭配。
您在 CSS 中定义为 fixed 的是固定的背景-background-attachment（而不是随着内容滚动），而不是大小。跨度>