Andrey Fedorov's questions

在服务器端有数据：

$arr[0]['title'] = 'John Smith';
$arr[0]['photo'] = 'img/John Smith.svg';

根据该数据，计算出字符图标的颜色：

$color = '#'.mb_substr(md5($arr[0]['title']),0,3);

根据这些数据，形成了代码：

<style>
.pic {
  background-image: url(".$arr[0]['photo'].");
  fill: ".$color.";
}
</style>

<h2>".$arr[0]['title']."</h2>
<div class="pic">
</div>

如果将 SVG 图像添加到 HTML 内联或 Base64 中，则不会有问题。
但是当它在文件中给出时如何着色呢？

UPD：.pic {--svg-color: ".$color."}在css和svg文件中注册似乎是一个优雅的解决方案style="fill: var(--svg-color)"，但是当图片是背景时它不起作用。(

UPD2：应大众需求，添加了一张图片：

1. 选择器必须在相同的规则下列出{color: red}。
2. 您无法撤消值 - 在用选择器替换它们之前，您不知道它们是什么。

它需要是这样的：

代码是这样的：

.parrent {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 1em;
}

.child {
  width: 100px;
  height: 100px;
  border: 2px solid;
  background-color: blue;
}

<div class="parrent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
<div class="separator"></div>
<div class="parrent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

ps：.parrent ~ .parrent .child:nth-child(3)- 显然，你不能写......

我们有这样的模型。中的网站的主要部分.container受最小和最大宽度的限制（对于“蓬松度”）。我们需要在浏览器窗口底部创建一个固定块到整个可用宽度，但是里面的内容必须像容器一样在宽度上进行限制。一切都会好的，但是垂直滚动的大小会干扰计算。原则上，我可以简单地通过询问来解决这个问题.bar {overflow-y: scroll}。但这是一根拐杖，我不想使用它。怎么变美？

ps：如果那样，Html可以更改相同。

编码：

* {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
}

.container {
  width: 100%;
  max-width: 400px;
  min-width: 320px;
  min-height: 120vh;
  box-sizing: border-box;
  border: 1px solid grey;
  margin: 0 auto;
}

.bar {
  position: fixed;
  top: calc(100vh - 4em);
  left: 0;
  background-color: rgba(0, 0, 0, .2);
  width: 100vw;
}

.bar .container {
  border-color: red;
}

<div class="container">
</div>
<div class="bar">
  <div class="container">
  </div>
</div>

您需要快速检查服务器上是否有本地 php 文件。我测量脚本的执行时间。

Способ с file_exists  - ~0.08сек
Способ с @get_headers - ~0.3сек

有没有办法更快地检查文件是否存在？

如果该文件存在，我将其包括在内。当然，你也可以完全不检查，直接打开（关闭错误输出），但我不喜欢这种方法。