Question

我已经对此进行了大量研究，但我必须做错事，因为它对我来说无效。我想要做的是将Vignette.png居中以覆盖我的其他背景，这是一个重复的模式。不幸的是，由于我的声誉仍然很低，我仍然无法发布图片:-)。但基本上我想要的是小插图，这是一个4k分辨率的图像，在页面上居中，如果你有一个更大的屏幕，你会看到盈余。但似乎发生的事情是图像开始在左上角渲染，我甚至看不到图像的中心，因为我的屏幕不够大。再一次，我希望我能用一些图片来澄清我的问题，但希望我已经解释得很好。

这是我的代码：

/* CSS */

body {
  background-image: url("Vignette.png"), url("Pattern.png");
  background-repeat: no-repeat, repeat;
  background-position: center, auto;
}

<!-- HTML -->

<!DOCTYPE html>

<html>

<head>

  <title>WIP</title>
  <meta charset="UFT-8">
  <link rel="stylesheet" href="style.css">

</head>

</html>

感谢您的回答！

Answer 1

我还没有完全理解你想要达到的目标。但有可能你会尝试background-size: cover或background-size: contain。

这是一个中心图像的示例，它会扩展到达到实际尺寸，然后出现边距/背景，因此它永远不会超过其分辨率：

#page {
  background-image: url('some-image.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

更多信息：http://www.w3schools.com/cssref/css3_pr_background-size.asp

我希望它有所帮助

Answer 2

您需要将background-attachment: fixed添加到CSS中，并为该职位提供一个通用规则：

＆＃13;

body {
    background-image: url("http://lorempixel.com/400/200/"), url("http://lorempixel.com/40/40/");
    background-repeat: no-repeat, repeat;
    background-attachment: fixed;
    background-position: center center;
}

＆＃13;

<!DOCTYPE html>

<html>

<head>

  <title>WIP</title>
  <meta charset="UFT-8">
  <link rel="stylesheet" href="style.css">

</head>
  
<body></body>

</html>

＆＃13;

回应你的评论：

background-attachment: fixed属性允许图片在页面上保持其位置而不管其他元素，而不是继承它的位置，从而与页面一起流动。

＆＃39;通用规则＆＃39;我提到简单替换你的规则实际上是无效的CSS和一个有效规则，它规定了背景图像在水平和垂直方向上的位置（按此顺序）：background-position: center center。

Answer 3

使用背景尺寸：封面;为了这。我举了一个例子，这是你想要达到的目标吗？

以下是有关backround-size属性的一些信息。 http://devdocs.io/css/background-size

/* CSS */

body {
  background-image: url("http://www.handleidinghtml.nl/html/afbeeldingen/voorbeelden/usa3.gif"), url("Pattern.png");
  background-repeat: no-repeat repeat;
  background-position: center center;
  background-size: cover;
}

<!-- HTML -->

<!DOCTYPE html>

<html>

<head>

  <title>WIP</title>
  <meta charset="UFT-8">
  <link rel="stylesheet" href="style.css">

</head>

</html>

如何集中更大的背景

3 个答案: