即使使用相同的CSS，重复的点状图像背景在不同区域以不同尺寸显示

Question

我正在构建一个具有特定设计的目录页面。

根据设计，每个标题后面应该跟有点，直到行尾。 点的大小也会根据标题的大小而变化。

我使用标题标签作为换行，里面有一个锚标签。我使用了伪“::after”元素来显示点。我使用了带有背景重复 CSS 的点图像。

这按预期工作。但我面临一个奇怪的问题。

例如，H1的Dot设计会更大。 H2的网点设计应该小一点。 H3的网点设计应该更小。该页面将有多个 H1、H2 和 H3。

问题是 H3 内的点显示不同。一个 H3 内的点较大，另一个较小。虽然风格一样。

.outer{max-width:600px;overflow:hidden;}
h1, h1 a { font-weight: 400; font-size: 26px !important; border-left: 4px solid #000; color: #000; line-height: 38px; padding-left: 10px; margin-bottom: 15px; }
h2, h2 a { color: #006da3; font-size: 23px !important; font-weight: 400; border-left: 4px solid #006da3; line-height: 30px; padding-left: 10px; margin-bottom: 15px; }
h3, h3 a { color: #000; font-size: 21px !important; font-weight: 400; border-left: 4px solid #2690cd; line-height: 28px; padding-left: 10px; margin-bottom: 15px; }
h4, h4 a { color: #000; font-size: 19px !important; font-weight: 400; border-left: 4px solid #71a3bc; line-height: 26px; padding-left: 10px; margin-bottom: 15px; }
h5, h5 a { color: #000; font-size: 16px !important; font-weight: 400; border-left: 4px solid #000; line-height: 21px; padding-left: 10px; margin-bottom: 15px; }
.heading1 a, .heading2 a, .heading3 a, .heading4 a, .heading5 a, .heading6 a { padding-left: 0px !important; border: 0px !important; margin-left: 0px !important;text-decoration:none; }
.heading_title { margin: 0; } 
.heading1,.heading1 a { font-size: 23px !important; line-height:34px; }
.heading2,.heading2 a { margin-left: 15px; font-size: 19px !important; line-height:28px; } 
.heading3,.heading3 a { margin-left: 30px; font-size: 17px !important;line-height:25px; } 
.heading4,.heading4 a { margin-left: 45px; font-size: 16px !important;line-height:24px; } 
.heading5,.heading5 a { margin-left: 60px; font-size: 14px !important;line-height:22px; } 
.heading6,.heading6 a { margin-left: 75px; font-size: 12px !important;line-height:20px; }
.heading_title { display: flex; align-items: baseline; box-sizing: border-box; width: 100%; position: relative; }
.heading_title a { display: inline-block; width: fit-content; margin-bottom: 0; min-width: fit-content; }
.heading_title::after {margin-left: 5px;background-image: url(https://www.cwdev.apptec360.com/wp-content/uploads/2024/05/grey-box-repeater.png);background-size: contain;background-position-x: right;height: 3.25px;content: " ";width: 100%;display: inline-block;min-width: -webkit-fill-available;background-repeat: repeat;}
h2.heading_title.heading2::after { background-image: url(https://www.cwdev.apptec360.com/wp-content/uploads/2024/05/blue-box-repeater.png); height:2.5px; }
.heading_title.heading3::after {height: 2px;}
.heading_title.heading4::after,.heading_title.heading5::after { height: 1.75px; }
h2.heading_title.heading2 { width: calc(100% - 15px); } 
h3.heading_title.heading3 { width: calc(100% - 30px); } 
h4.heading_title.heading4 { width: calc(100% - 45px); } 
h5.heading_title.heading5 { width: calc(100% - 60px); }

<div class="outer">
<h1 class="heading_title heading1"><a href="#131">General Overview</a></h1>
<h2 class="heading_title heading2"><a href="#163">Introduction to AppTec360</a></h2>
<h2 class="heading_title heading2"><a href="#165">Supported Device Operating Systems</a></h2>
<h2 class="heading_title heading2"><a href="#169">Explanation of the “Supervised-Mode” on Apple Devices</a></h2>
<h3 class="heading_title heading3"><a href="#177">Available in the Supervised-Mode</a></h3>
<h3 class="heading_title heading3"><a href="#184">Adding a device to the DEP</a></h3>
<h3 class="heading_title heading3"><a href="#186">Adding a testing DEP</a></h3>
<h2 class="heading_title heading2"><a href="#171">Explanation of Android Enterprise</a></h2>
</div>

在上面的演示中，标题“在监督模式下可用”、“向 DEP 添加设备”和“添加测试 DEP”是 H3，它们都共享相同的 CSS 及其伪元素 (::after ) 具有相同的背景图像和 CSS。但正如您所看到的，它们以不同的尺寸显示。与其他 2 个 H3 相比，“添加测试 DEP”内的 DOTS 要小得多。

如果有帮助，请添加下面的 JS Fiddle 链接。

https://jsfiddle.net/rajeevRF/3qu9e0yL/19/

添加其外观的屏幕截图。

Answer 1

问题在于背景大小设置为包含。必须改成合适的值

.outer{max-width:600px;overflow:hidden;}
h1, h1 a { font-weight: 400; font-size: 26px !important; border-left: 4px solid #000; color: #000; line-height: 38px; padding-left: 10px; margin-bottom: 15px; }
h2, h2 a { color: #006da3; font-size: 23px !important; font-weight: 400; border-left: 4px solid #006da3; line-height: 30px; padding-left: 10px; margin-bottom: 15px; }
h3, h3 a { color: #000; font-size: 21px !important; font-weight: 400; border-left: 4px solid #2690cd; line-height: 28px; padding-left: 10px; margin-bottom: 15px; }
h4, h4 a { color: #000; font-size: 19px !important; font-weight: 400; border-left: 4px solid #71a3bc; line-height: 26px; padding-left: 10px; margin-bottom: 15px; }
h5, h5 a { color: #000; font-size: 16px !important; font-weight: 400; border-left: 4px solid #000; line-height: 21px; padding-left: 10px; margin-bottom: 15px; }
.heading1 a, .heading2 a, .heading3 a, .heading4 a, .heading5 a, .heading6 a { padding-left: 0px !important; border: 0px !important; margin-left: 0px !important;text-decoration:none; }
.heading_title { margin: 0; } 
.heading1,.heading1 a { font-size: 23px !important; line-height:34px; }
.heading2,.heading2 a { margin-left: 15px; font-size: 19px !important; line-height:28px; } 
.heading3,.heading3 a { margin-left: 30px; font-size: 17px !important;line-height:25px; } 
.heading4,.heading4 a { margin-left: 45px; font-size: 16px !important;line-height:24px; } 
.heading5,.heading5 a { margin-left: 60px; font-size: 14px !important;line-height:22px; } 
.heading6,.heading6 a { margin-left: 75px; font-size: 12px !important;line-height:20px; }
.heading_title { display: flex; align-items: baseline; box-sizing: border-box; width: 100%; position: relative; }
.heading_title a { display: inline-block; width: fit-content; margin-bottom: 0; min-width: fit-content; }
.heading_title::after {margin-left: 5px;background-image: url(https://www.cwdev.apptec360.com/wp-content/uploads/2024/05/grey-box-repeater.png);background-size: 7px 1px;background-position-x: right;height: 3.25px;content: " ";width: 100%;display: inline-block;min-width: -webkit-fill-available;background-repeat: repeat;}
h2.heading_title.heading2::after { background-image: url(https://www.cwdev.apptec360.com/wp-content/uploads/2024/05/blue-box-repeater.png); height:2.5px; }
.heading_title.heading3::after {height: 2px;}
.heading_title.heading4::after,.heading_title.heading5::after { height: 1.75px; }
h2.heading_title.heading2 { width: calc(100% - 15px); } 
h3.heading_title.heading3 { width: calc(100% - 30px); } 
h4.heading_title.heading4 { width: calc(100% - 45px); } 
h5.heading_title.heading5 { width: calc(100% - 60px); }

<div class="outer">
<h1 class="heading_title heading1"><a href="#131">General Overview</a></h1>
<h2 class="heading_title heading2"><a href="#163">Introduction to AppTec360</a></h2>
<h2 class="heading_title heading2"><a href="#165">Supported Device Operating Systems</a></h2>
<h2 class="heading_title heading2"><a href="#169">Explanation of the “Supervised-Mode” on Apple Devices</a></h2>
<h3 class="heading_title heading3"><a href="#177">Available in the Supervised-Mode</a></h3>
<h3 class="heading_title heading3"><a href="#184">Adding a device to the DEP</a></h3>
<h3 class="heading_title heading3"><a href="#186">Adding a testing DEP</a></h3>
<h2 class="heading_title heading2"><a href="#171">Explanation of Android Enterprise</a></h2>
</div>