CSS 具有平铺背景图像的多列的问题
Problems with CSS multicolumn with tiled background image
我想使用 CSS multicol 和 column-width 制作一个轮播式滚动水平卡片视图，并在元素上使用重复背景（例如带有黑色边框的白色背景） ，但我遇到了问题。
第一个问题是背景没有水平平铺超过页面宽度。如果我在 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>
虽然我在 Safari 中追踪到 CSS --变量的错误仍然存在，但我觉得我已经找到了问题的答案！亲自尝试一下。
: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>
我想使用 CSS multicol 和 column-width 制作一个轮播式滚动水平卡片视图，并在元素上使用重复背景（例如带有黑色边框的白色背景） ，但我遇到了问题。
第一个问题是背景没有水平平铺超过页面宽度。如果我在 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>
虽然我在 Safari 中追踪到 CSS --变量的错误仍然存在，但我觉得我已经找到了问题的答案！亲自尝试一下。
: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>