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>