如何设置背景图像（可重复的固定模式）和可根据内容更改的背景颜色（DIV）答案

【问题标题】：How to set a background-image (fixed pattern repeatable) and a background-color changeable depending the content (DIV)如何设置背景图像（可重复的固定模式）和可根据内容更改的背景颜色（DIV）
【发布时间】：2020-01-11 07:24:33
【问题描述】：

我想用 Angular 构建一个单页应用程序，但我正在努力寻找一种方法来获得固定的背景图像（一种可重复的白色图案，可能在标签 BODY 中）。

但是根据 DIV 的内容，我希望能够在这个固定的背景图像后面有不同的颜色（例如蓝色），如果你再滚动一点，颜色会是红色的。

css 大师可以为我解决这个问题或帮助我了解如何实现它吗？

也许要处理 z-index，某种视差？

【问题讨论】：

你有没有尝试过，或者你只知道你想要什么？由于您可以同时拥有background-color 和background-image，因此拥有固定background-image（具有透明度）和动态background-color 应该没有问题。既然你选择了 Angular，我猜你对那个框架有一些了解？

标签： css angular

【解决方案1】：

这是一个 Angular 应用的示例，其中静态设置了透明的 background-image，并且使用“ng-style”在插入（在 html 代码中）定义了 background-color。颜色是用户通过输入设置的变量。您可能想要一些稍微不同的东西，但希望能得到这个想法！

var myApp = angular.module('app', []);

body {
  background-image: url(https://www2.cs.arizona.edu/icon/docs/ipd234/pattern.gif);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="app" ng-style="{'background-color': colorName}">

<input type="text" ng-model="colorName" placeholder="enter a color name e.g. green">
</body>

【讨论】：

【解决方案2】：

如果我理解正确，您想在背景图像上添加透明颜色叠加层。您可以使用伪元素来实现这一点。尝试使用 after 选择器在容器顶部添加叠加层：

.container {
    background-image: url(...);
}

.container:after {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,0,0,.8);  // set alpha to transparency 
}

【讨论】：

请用代码 sn-p 看看我的回答。谢谢

【解决方案3】：

body{
	margin:0;
}
.container {
    background-image: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M82.42 180h-1.415L0 98.995v-2.827L6.167 90 0 83.833V81.004L81.005 0h2.827L90 6.167 96.167 0H98.996L180 81.005v2.827L173.833 90 180 96.167V98.996L98.995 180h-2.827L90 173.833 83.833 180H82.42zm0-1.414L1.413 97.58 8.994 90l-7.58-7.58L82.42 1.413 90 8.994l7.58-7.58 81.006 81.005-7.58 7.58 7.58 7.58-81.005 81.006-7.58-7.58-7.58 7.58zM175.196 0h-25.832c1.033 2.924 2.616 5.59 4.625 7.868C152.145 9.682 151 12.208 151 15c0 5.523 4.477 10 10 10 1.657 0 3 1.343 3 3v4h16V0h-4.803c.51.883.803 1.907.803 3 0 3.314-2.686 6-6 6s-6-2.686-6-6c0-1.093.292-2.117.803-3h10.394-13.685C161.18.938 161 1.948 161 3v4c-4.418 0-8 3.582-8 8s3.582 8 8 8c2.76 0 5 2.24 5 5v2h4v-4h2v4h4v-4h2v4h2V0h-4.803zm-15.783 0c-.27.954-.414 1.96-.414 3v2.2c-1.25.254-2.414.74-3.447 1.412-1.716-1.93-3.098-4.164-4.054-6.612h7.914zM180 17h-3l2.143-10H180v10zm-30.635 163c-.884-2.502-1.365-5.195-1.365-8 0-13.255 10.748-24 23.99-24H180v32h-30.635zm12.147 0c.5-1.416 1.345-2.67 2.434-3.66l-1.345-1.48c-1.498 1.364-2.62 3.136-3.186 5.14H151.5c-.97-2.48-1.5-5.177-1.5-8 0-12.15 9.84-22 22-22h8v30h-18.488zm13.685 0c-1.037-1.793-2.976-3-5.197-3-2.22 0-4.16 1.207-5.197 3h10.394zM0 148h8.01C21.26 148 32 158.742 32 172c0 2.805-.48 5.498-1.366 8H0v-32zm0 2h8c12.15 0 22 9.847 22 22 0 2.822-.53 5.52-1.5 8h-7.914c-.567-2.004-1.688-3.776-3.187-5.14l-1.346 1.48c1.09.99 1.933 2.244 2.434 3.66H0v-30zm15.197 30c-1.037-1.793-2.976-3-5.197-3-2.22 0-4.16 1.207-5.197 3h10.394zM0 32h16v-4c0-1.657 1.343-3 3-3 5.523 0 10-4.477 10-10 0-2.794-1.145-5.32-2.992-7.134C28.018 5.586 29.6 2.924 30.634 0H0v32zm0-2h2v-4h2v4h4v-4h2v4h4v-2c0-2.76 2.24-5 5-5 4.418 0 8-3.582 8-8s-3.582-8-8-8V3c0-1.052-.18-2.062-.512-3H0v30zM28.5 0c-.954 2.448-2.335 4.683-4.05 6.613-1.035-.672-2.2-1.16-3.45-1.413V3c0-1.04-.144-2.046-.414-3H28.5zM0 17h3L.857 7H0v10zM15.197 0c.51.883.803 1.907.803 3 0 3.314-2.686 6-6 6S4 6.314 4 3c0-1.093.292-2.117.803-3h10.394zM109 115c-1.657 0-3 1.343-3 3v4H74v-4c0-1.657-1.343-3-3-3-5.523 0-10-4.477-10-10 0-2.793 1.145-5.318 2.99-7.132C60.262 93.638 58 88.084 58 82c0-13.255 10.748-24 23.99-24h16.02C111.26 58 122 68.742 122 82c0 6.082-2.263 11.636-5.992 15.866C117.855 99.68 119 102.206 119 105c0 5.523-4.477 10-10 10zm0-2c-2.76 0-5 2.24-5 5v2h-4v-4h-2v4h-4v-4h-2v4h-4v-4h-2v4h-4v-4h-2v4h-4v-2c0-2.76-2.24-5-5-5-4.418 0-8-3.582-8-8s3.582-8 8-8v-4c0-2.64 1.136-5.013 2.946-6.66L72.6 84.86C70.39 86.874 69 89.775 69 93v2.2c-1.25.254-2.414.74-3.447 1.412C62.098 92.727 60 87.61 60 82c0-12.15 9.84-22 22-22h16c12.15 0 22 9.847 22 22 0 5.61-2.097 10.728-5.55 14.613-1.035-.672-2.2-1.16-3.45-1.413V93c0-3.226-1.39-6.127-3.6-8.14l-1.346 1.48C107.864 87.987 109 90.36 109 93v4c4.418 0 8 3.582 8 8s-3.582 8-8 8zM90.857 97L93 107h-6l2.143-10h1.714zM80 99c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm20 0c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6z' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
    position: fixed;
    width:100%
    height:100%
	
}
.red{
	background-color:red;
}
.black{
	background-color:black;
	color:white;
}

<div class="container">
</div>
<div class="red">
<h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h1>
</div>

<div><h1>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</h1>
</div>

<div class="black">
<h1>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
</h1>
</div>

您好，感谢您的回答，但这不是我网站的预期用途。

我希望有一个背景颜色为蓝色和另一个背景颜色为红色的 DIV。

我找到了一种方法，但只有在背景图像固定的情况下，当我尝试使用绝对时，背景图像才会结束:(

还有一个问题是图片在前面……

谢谢

【讨论】：

【解决方案4】：

好的，我已经找到解决方案了。

首先，我使用重复图像设置了一个空 div：其次，我使用默认背景颜色和计算出的高度设置另一个空 div

<body>
  <div class="background"></div>
  <div class="background-color" [ngStyle]="{height:calcHeight}"></div>
  ...

.background{
  background: url(/assets/img/svg/back.svg);
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.background-color{
  position: absolute;
  background-color: #d3d3d3;
  width: 100%;
  z-index: -3;
}

然后我可以使用其他颜色为下一个 div 设置 z-index 为 -2 和另一种颜色。

瞧，如果有人有兴趣知道完整代码，请 MP，我将分享网站

【讨论】：