CSS 多列与平铺背景图像的问题

Question

我想使用具有列宽的 CSS multicol 制作轮播式滚动水平卡片视图，并在元素上使用重复背景（例如带有黑色边框的白色背景），但我遇到了问题。

第一个问题是背景不会水平平铺超过页面宽度。 如果我在 multicol 元素上设置宽度，背景会重复到那个程度，但这会干扰自然宽度。

第二个问题是当我水平调整 window 时列宽发生变化。 我可以说它正在尝试以一种漂亮的方式平铺列，但我需要宽度不要这样做，否则我的背景会不同步。

 .holder { overflow-x: scroll; position: relative; }.columns { column-width: 100px; height: 200px; column-rule: 10px solid rgba(0, 0, 250, 0.2); background-repeat: repeat-x; background-size: 120px 200px; background-image: linear-gradient(90deg, red 95px, transparent 50%), linear-gradient(white 5px, transparent 100%); }

 <div class=holder> <div class=columns> Tons Of Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid igitur dubitamus in tota eius natura quaerere quid sit effectum? Ne in odium veniam, si amicum destitero tueri. Disserendi artem nullam habuit. Nam his libris eum malo quam reliquo ornatu villae delectari. Illud quaero, quid ei, qui in voluptate summum bonum ponat, consentaneum sit dicere. Placet igitur tibi, Cato, cum res sumpseris non concessas, ex illis efficere, quod velis? Quaero igitur, quo modo hae tantae commendationes a natura profectae subito a sapientia relictae sint. Beatus autem esse in maximarum rerum timore nemo potest. Utram tandem linguam nescio? Eam si varietatem diceres, intellegerem, ut etiam non dicente te intellego; Recte, inquit, intellegis. Consequentia exquirere, quoad sit id, quod volumus, effectum. Dat enim intervalla et relaxat. Tum Torquatus: Prorsus, inquit, assentior; Qui enim existimabit posse se miserum essudicio aut, si coronam times, dic in senatu. Etenim semper illud extra est, quod arte comprehenditur. Quid ei reliquisti, nisi te, quoquo modo loqueretur, intellegere, quid diceret? Itaque a sapientia praecipitur se ipsam, si usus sit, sapiens ut relinquat. Quos quidem tibi studiose et diligenter tractandos magnopere censeo. Quo plebiscito decreta a senatu est consuli quaestio Cn. Quid ergo attinet dicere: Nihil haberem, quod reprehenderem, si finitas cupiditates haberent? Aliena dixit in physicis nec ea ipsa, quae tibi probarentur; Refert tamen, quo modo. Quis negat? Quamquam tu hanc copiosiorem etiam soles dicere. Sed haec quidem liberius ab eo dicuntur et saepius. Respondeat totidem verbis. Re mihi non aeque satisfacit, et quidem locis pluribus. Expressa vero in iis aetatibus, quae iam confirmatae sunt. Aliter homines, aliter philosophos loqui putas oportere? An hoc usque quaque, aliter in vita? Sin dicit obscurari quaedam nec apparere, quia valde parva sint, nos quoque concedimus; Ego quoque, inquit, didicerim libentius si quid attuleris, quam te reprehenderim. Quantum Aristoxeni ingenium consumptum videmus in musicis? Illud non continuo, ut aeque incontentae. Tanta vis admonitionis inest in locis; Sed ad haec, nisi molestum est, habeo quae velim. Te ipsum, dignissimum maioribus tuis, voluptasne induxit, ut adolescentulus eriperes P. Facit enim ille duo seiuncta ultima bonorum, quae ut essent vera, coniungi debuerunt; Nummus in Croesi divitiis obscuratur, pars est tamen divitiarum. Quae cum praeponunt, ut sit aliqua rerum selectio, naturam videntur sequi; Duo Reges: constructio interrete. Audeo dicere, inquit. Semper enim ita adsumit aliquid, ut ea, quae prima dederit, non deserat. Huius, Lyco, oratione locuples, rebus ipsis ielunior. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Sed tu istuc dixti bene Latine, parum plane. Respondent extrema primis, media utrisque, omnia omnibus. Quid ei reliquisti, nisi te, quoquo modo loqueretur, intellegere, quid diceret? Paulum, cum regem Persem captum adduceret, eodem flumine invectio? Nec vero alia sunt quaerenda contra Carneadeam illam sententiam. Tu autem, si tibi illa probabantur, cur non propriis verbis ea tenebas? </div> </div>

Answer 1

尽管我在 Safari 中仍然存在涉及 CSS --variables 的错误，但我觉得我已经能够找到问题的答案。 自己试试吧。

 :root { --colwidth: 120px; --colcount: 30; }.holder { overflow: scroll; position: relative; width: 360px; width: calc(var(--colwidth) * 3); xbackground: gray; word-wrap: break-word; border: thin solid gray; }.columns { position: relative; display: inline-block; column-width: 110px; column-width: calc(var(--colwidth) - 10px); /* this is really minimum width, it rounds up to the next 1/3, 1/2, etc of the holder */ height: 200px; column-rule: 10px solid rgba(0,0,250,0.2); /* does not affect gap size, is centered on it instead */ column-fill: auto; column-gap: 0px; /* seems to change the column width too, what the hell is the formula? soemthing to do with the holder*/ }.columns:before { content: ""; position: absolute; left: 0px; top: 0px; bottom: 0px;; width: calc(var(--colcount) * var(--colwidth)); z-index: -1; background: orange; background-position: 0 0; background-repeat: repeat-x; background-size: var(--colwidth) 100%; background-image: linear-gradient(90deg, red 33%, transparent 66%), linear-gradient(white 0%, transparent 100%); }.end { }.text { padding-left: 10px; padding-right: 10px; }

 <button onclick="document.documentElement.style.setProperty('--colwidth', prompt('new width (120px, 10em, 30vw, etc)'));">Change column width</button> <button onclick="document.documentElement.style.setProperty('--colcount', Math.ceil((document.querySelector('.end').getBoundingClientRect().right - document.querySelector('.columns').getBoundingClientRect().x)/120))">Make.end the last backgrounded column</button> <div class=holder> <div class=columns> <div class=text contenteditable> Tons Of Text: .....................................Periods Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid igitur dubitamus in tota eius natura quaerere quid sit effectum? Ne in odium veniam, si amicum destitero tueri. Disserendi artem nullam habuit. Nam his libris eum malo quam reliquo ornatu villae delectari. Illud quaero, quid ei, qui in voluptate summum bonum ponat, consentaneum sit dicere. Placet igitur tibi, Cato, cum res sumpseris non concessas, ex illis efficere, quod velis? Quaero igitur, quo modo hae tantae commendationes a natura profectae subito a sapientia relictae sint. Beatus autem esse in maximarum rerum timore nemo potest. Utram tandem linguam nescio? Eam si varietatem diceres, intellegerem, ut etiam non dicente te intellego; Recte, inquit, intellegis. Consequentia exquirere, quoad sit id, quod volumus, effectum. Dat enim intervalla et relaxat. Tum Torquatus: Prorsus, inquit, assentior; Qui enim existimabit posse se miserum esse beatus non erit. Eorum enim omnium multa praetermittentium, dum eligant aliquid, quod sequantur, quasi curta sententia; Quis istud possit, inquit, negare? Scio enim esse quosdam, qui quavis lingua philosophari possint; Neutrum vero, inquit ille. Idem iste, inquam, de voluptate quid sentit? Quid ait Aristoteles reliquique Platonis alumni? Uterque enim summo bono fruitur, id est voluptate. Omnia contraria, quos etiam insanos esse vultis. Inde igitur, inquit, ordiendum est. At tu eadem ista dic in iudicio aut, si coronam times, dic in senatu. Etenim semper illud extra est, quod arte comprehenditur. Quid ei reliquisti, nisi te, quoquo modo loqueretur, intellegere, quid diceret? Itaque a sapientia praecipitur se ipsam, si usus sit, sapiens ut relinquat. Quos quidem tibi studiose et diligenter tractandos magnopere censeo. Quo plebiscito decreta a senatu est consuli quaestio Cn. Quid ergo attinet dicere: Nihil haberem, quod reprehenderem, si finitas cupiditates haberent? Aliena dixit in physicis nec ea ipsa, quae tibi probarentur; Refert tamen, quo modo. Quis negat? Quamquam tu hanc copiosiorem etiam soles dicere. Sed haec quidem liberius ab eo dicuntur et saepius. Respondeat totidem verbis. Re mihi non aeque satisfacit, et quidem locis pluribus. Expressa vero in iis aetatibus, quae iam confirmatae sunt. Aliter homines, aliter philosophos loqui putas oportere? An hoc usque quaque, aliter in vita? Sin dicit obscurari quaedam nec apparere, quia valde parva sint, nos quoque concedimus; Ego quoque, inquit, didicerim libentius si quid attuleris, quam te reprehenderim. Quantum Aristoxeni ingenium consumptum videmus in musicis? Illud non continuo, ut aeque incontentae. Tanta vis admonitionis inest in locis; Sed ad haec, nisi molestum est, habeo quae velim. Te ipsum, dignissimum maioribus tuis, voluptasne induxit, ut adolescentulus eriperes P. Facit enim ille duo seiuncta ultima bonorum, quae ut essent vera, coniungi debuerunt; Nummus in Croesi divitiis obscuratur, pars est tamen divitiarum. Quae cum praeponunt, ut sit aliqua rerum selectio, naturam videntur sequi; Duo Reges: constructio interrete. Audeo dicere, inquit. Semper enim ita adsumit aliquid, ut ea, quae prima dederit, non deserat. Huius, Lyco, oratione locuples, rebus ipsis ielunior. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Sed tu istuc dixti bene Latine, parum plane. Respondent extrema primis, media utrisque, omnia omnibus. Quid ei reliquisti, nisi te, quoquo modo loqueretur, intellegere, quid diceret? Paulum, cum regem Persem captum adduceret, eodem flumine invectio? Nec vero alia sunt quaerenda contra Carneadeam illam sententiam. Tu autem, si tibi illa probabantur, cur non propriis verbis ea tenebas? </div> <button class=end onclick="alert('I am in column ' + Math.ceil((document.querySelector('.end').getBoundingClientRect().right - document.querySelector('.columns').getBoundingClientRect().x)/120));">end</button> </div> </div>