css通过attr动态设置宽度

可以使用CSS的attr()函数来动态设置元素的宽度，具体步骤如下：

1. 在CSS中定义一个自定义属性，比如width属性：

:root {
    --width: 100px;
}

2. 在需要设置宽度的元素中，使用attr()函数获取自定义属性的值，并将其作为元素的宽度值：

div {
    width: attr(data-width var(--width));
}

其中，data-width是元素的data-*属性，可以根据具体情况进行修改。

这样，当需要改变元素的宽度时，只需要修改自定义属性的值即可。

相关问题

css 表格 实现td 根据 th宽度

可以使用CSS中的属性选择器和伪元素来实现。

首先，给每个th设置一个data属性，记录其宽度值，如下所示：

<table>
  <thead>
    <tr>
      <th data-width="100">Name</th>
      <th data-width="150">Age</th>
      <th data-width="200">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>30</td>
      <td>Los Angeles</td>
    </tr>
  </tbody>
</table>

然后，使用CSS属性选择器选择每个td，并利用伪元素:before来插入一个空的占位元素，宽度设置为对应th的宽度值，代码如下：

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  background-color: #ddd;
  font-weight: bold;
  text-align: left;
  padding: 10px;
}

td {
  padding: 10px;
}

td:before {
  content: "";
  display: inline-block;
  width: attr(data-width px, 0); /* 使用attr()函数获取对应th的data-width属性值 */
  vertical-align: middle;
}

这样，每个td就会在其前面插入一个宽度为对应th宽度值的空元素，从而实现了td宽度根据th的效果。

css设置文字跟随背景的宽高而变化大小

CSS中可以使用`background-size`属性来控制背景图片的大小，并通过配合`:before`或`:after`伪元素和`content`属性，将文字与背景图一起设置。当设置`background-size`为`cover`或`contain`时，文字会随着背景图的宽度和高度自动调整其大小，使其既能填满整个容器，又能保持字间距和排版相对清晰。

例如，如果你想要一个标题文本完全覆盖一个背景图片，你可以这样做：

.parent-class {
  position: relative;
}

.parent-class::before {
  content: attr(data-text); /* 使用"data-text"这样的数据属性存放你要显示的文字 */
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: transparent; /* 透明颜色让文字与背景融合 */
}

.parent-class {
  background-image: url('your-background-image.jpg');
  background-size: cover; /* 或者 background-size: contain */
}

这样，无论背景图片的尺寸如何变化，文字都会随之相应地缩放。