<div class="form">
<label for="background-attachment">background-attachment:</label>
<select name="background-attachment" id="background-attachment">
<option value="scroll">scroll</option>
<option value="fixed">fixed</option>
<option value="local">local</option>
</select>
</div>
<div class="container">
<div class="full__bleed hero">
<h1>Using <code>background-attachment: <span id="value">scroll</span></code> on a background image</h1>
</div>
<div class="section">
<div class="section__heading">
<h3 class="section__title">爆款直降</h3>
</div>
<div class="section__body">
<ul class="cards">
<li class="card">
<div class="card__media">
<img src="https://picsum.photos/640/?random=1" alt="">
<div class="card__badge">年货节</div>
</div>
<div class="card__content">
<div class="card__heading">
<h4 class="card__title">卡片标题卡片标题</h4>
</div>
<div class="card__des">口味清爽，最多八个字</div>
<div class="card__action">
<div class="card__price">
<span>¥</span>
<strong>32</strong>
</div>
<div class="card__link">
<svg t="1639970508640" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9201" width="200" height="200">
<path d="M398.933333 326.4l168.533334 168.533333-168.533334 168.533334c-14.933333 14.933333-14.933333 38.4 0 53.333333s38.4 14.933333 53.333334 0l196.266666-196.266667c14.933333-14.933333 14.933333-38.4 0-53.333333l-196.266666-196.266667c-14.933333-14.933333-38.4-14.933333-53.333334 0s-14.933333 40.533333 0 55.466667zM512 981.333333C251.733333 981.333333 42.666667 772.266667 42.666667 512S251.733333 42.666667 512 42.666667s469.333333 209.066667 469.333333 469.333333-209.066667 469.333333-469.333333 469.333333z" p-id="9202" fill="currentColor"></path>
</svg>
</div>
</div>
</div>
</li>
<li class="card">
<div class="card__media">
<img src="https://picsum.photos/640/?random=2" alt="">
<div class="card__badge">年货节</div>
</div>
<div class="card__content">
<div class="card__heading">
<h4 class="card__title">卡片标题卡片标题</h4>
</div>
<div class="card__des">口味清爽，最多八个字</div>
<div class="card__action">
<div class="card__price">
<span>¥</span>
<strong>32</strong>
</div>
<div class="card__link">
<svg t="1639970508640" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9201" width="200" height="200">
<path d="M398.933333 326.4l168.533334 168.533333-168.533334 168.533334c-14.933333 14.933333-14.933333 38.4 0 53.333333s38.4 14.933333 53.333334 0l196.266666-196.266667c14.933333-14.933333 14.933333-38.4 0-53.333333l-196.266666-196.266667c-14.933333-14.933333-38.4-14.933333-53.333334 0s-14.933333 40.533333 0 55.466667zM512 981.333333C251.733333 981.333333 42.666667 772.266667 42.666667 512S251.733333 42.666667 512 42.666667s469.333333 209.066667 469.333333 469.333333-209.066667 469.333333-469.333333 469.333333z" p-id="9202" fill="currentColor"></path>
</svg>
</div>
</div>
</div>
</li>
<li class="card">
<div class="card__media">
<img src="https://picsum.photos/640/?random=3" alt="">
<div class="card__badge">年货节</div>
</div>
<div class="card__content">
<div class="card__heading">
<h4 class="card__title">卡片标题卡片标题</h4>
</div>
<div class="card__des">口味清爽，最多八个字</div>
<div class="card__action">
<div class="card__price">
<span>¥</span>
<strong>32</strong>
</div>
<div class="card__link">
<svg t="1639970508640" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9201" width="200" height="200">
<path d="M398.933333 326.4l168.533334 168.533333-168.533334 168.533334c-14.933333 14.933333-14.933333 38.4 0 53.333333s38.4 14.933333 53.333334 0l196.266666-196.266667c14.933333-14.933333 14.933333-38.4 0-53.333333l-196.266666-196.266667c-14.933333-14.933333-38.4-14.933333-53.333334 0s-14.933333 40.533333 0 55.466667zM512 981.333333C251.733333 981.333333 42.666667 772.266667 42.666667 512S251.733333 42.666667 512 42.666667s469.333333 209.066667 469.333333 469.333333-209.066667 469.333333-469.333333 469.333333z" p-id="9202" fill="currentColor"></path>
</svg>
</div>
</div>
</div>
</li>
<li class="card">
<div class="card__media">
<img src="https://picsum.photos/640/?random=4" alt="">
<div class="card__badge">年货节</div>
</div>
<div class="card__content">
<div class="card__heading">
<h4 class="card__title">卡片标题卡片标题</h4>
</div>
<div class="card__des">口味清爽，最多八个字</div>
<div class="card__action">
<div class="card__price">
<span>¥</span>
<strong>32</strong>
</div>
<div class="card__link">
<svg t="1639970508640" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9201" width="200" height="200">
<path d="M398.933333 326.4l168.533334 168.533333-168.533334 168.533334c-14.933333 14.933333-14.933333 38.4 0 53.333333s38.4 14.933333 53.333334 0l196.266666-196.266667c14.933333-14.933333 14.933333-38.4 0-53.333333l-196.266666-196.266667c-14.933333-14.933333-38.4-14.933333-53.333334 0s-14.933333 40.533333 0 55.466667zM512 981.333333C251.733333 981.333333 42.666667 772.266667 42.666667 512S251.733333 42.666667 512 42.666667s469.333333 209.066667 469.333333 469.333333-209.066667 469.333333-469.333333 469.333333z" p-id="9202" fill="currentColor"></path>
</svg>
</div>
</div>
</div>
</li>
<li class="card">
<div class="card__media">
<img src="https://picsum.photos/640/?random=5" alt="">
<div class="card__badge">年货节</div>
</div>
<div class="card__content">
<div class="card__heading">
<h4 class="card__title">卡片标题卡片标题</h4>
</div>
<div class="card__des">口味清爽，最多八个字</div>
<div class="card__action">
<div class="card__price">
<span>¥</span>
<strong>32</strong>
</div>
<div class="card__link">
<svg t="1639970508640" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9201" width="200" height="200">
<path d="M398.933333 326.4l168.533334 168.533333-168.533334 168.533334c-14.933333 14.933333-14.933333 38.4 0 53.333333s38.4 14.933333 53.333334 0l196.266666-196.266667c14.933333-14.933333 14.933333-38.4 0-53.333333l-196.266666-196.266667c-14.933333-14.933333-38.4-14.933333-53.333334 0s-14.933333 40.533333 0 55.466667zM512 981.333333C251.733333 981.333333 42.666667 772.266667 42.666667 512S251.733333 42.666667 512 42.666667s469.333333 209.066667 469.333333 469.333333-209.066667 469.333333-469.333333 469.333333z" p-id="9202" fill="currentColor"></path>
</svg>
</div>
</div>
</div>
</li>
<li class="card">
<div class="card__media">
<img src="https://picsum.photos/640/?random=6" alt="">
<div class="card__badge">年货节</div>
</div>
<div class="card__content">
<div class="card__heading">
<h4 class="card__title">卡片标题卡片标题</h4>
</div>
<div class="card__des">口味清爽，最多八个字</div>
<div class="card__action">
<div class="card__price">
<span>¥</span>
<strong>32</strong>
</div>
<div class="card__link">
<svg t="1639970508640" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9201" width="200" height="200">
<path d="M398.933333 326.4l168.533334 168.533333-168.533334 168.533334c-14.933333 14.933333-14.933333 38.4 0 53.333333s38.4 14.933333 53.333334 0l196.266666-196.266667c14.933333-14.933333 14.933333-38.4 0-53.333333l-196.266666-196.266667c-14.933333-14.933333-38.4-14.933333-53.333334 0s-14.933333 40.533333 0 55.466667zM512 981.333333C251.733333 981.333333 42.666667 772.266667 42.666667 512S251.733333 42.666667 512 42.666667s469.333333 209.066667 469.333333 469.333333-209.066667 469.333333-469.333333 469.333333z" p-id="9202" fill="currentColor"></path>
</svg>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="full__bleed section--bg">
</div>
<div class="section">
<div class="section__heading">
<h3 class="section__title">爆款直降</h3>
</div>
<div class="section__body">
<ul class="cards">
<li class="card">
<div class="card__media">
<img src="https://picsum.photos/640/?random=7" alt="">
<div class="card__badge">年货节</div>
</div>
<div class="card__content">
<div class="card__heading">
<h4 class="card__title">卡片标题卡片标题</h4>
</div>
<div class="card__des">口味清爽，最多八个字</div>
<div class="card__action">
<div class="card__price">
<span>¥</span>
<strong>32</strong>
</div>
<div class="card__link">
<svg t="1639970508640" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9201" width="200" height="200">
<path d="M398.933333 326.4l168.533334 168.533333-168.533334 168.533334c-14.933333 14.933333-14.933333 38.4 0 53.333333s38.4 14.933333 53.333334 0l196.266666-196.266667c14.933333-14.933333 14.933333-38.4 0-53.333333l-196.266666-196.266667c-14.933333-14.933333-38.4-14.933333-53.333334 0s-14.933333 40.533333 0 55.466667zM512 981.333333C251.733333 981.333333 42.666667 772.266667 42.666667 512S251.733333 42.666667 512 42.666667s469.333333 209.066667 469.333333 469.333333-209.066667 469.333333-469.333333 469.333333z" p-id="9202" fill="currentColor"></path>
</svg>
</div>
</div>
</div>
</li>
<li class="card">
<div class="card__media">
<img src="https://picsum.photos/640/?random=8" alt="">
<div class="card__badge">年货节</div>
</div>
<div class="card__content">
<div class="card__heading">
<h4 class="card__title">卡片标题卡片标题</h4>
</div>
<div class="card__des">口味清爽，最多八个字</div>
<div class="card__action">
<div class="card__price">
<span>¥</span>
<strong>32</strong>
</div>
<div class="card__link">
<svg t="1639970508640" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9201" width="200" height="200">
<path d="M398.933333 326.4l168.533334 168.533333-168.533334 168.533334c-14.933333 14.933333-14.933333 38.4 0 53.333333s38.4 14.933333 53.333334 0l196.266666-196.266667c14.933333-14.933333 14.933333-38.4 0-53.333333l-196.266666-196.266667c-14.933333-14.933333-38.4-14.933333-53.333334 0s-14.933333 40.533333 0 55.466667zM512 981.333333C251.733333 981.333333 42.666667 772.266667 42.666667 512S251.733333 42.666667 512 42.666667s469.333333 209.066667 469.333333 469.333333-209.066667 469.333333-469.333333 469.333333z" p-id="9202" fill="currentColor"></path>
</svg>
</div>
</div>
</div>
</li>
<li class="card">
<div class="card__media">
<img src="https://picsum.photos/640/?random=9" alt="">
<div class="card__badge">年货节</div>
</div>
<div class="card__content">
<div class="card__heading">
<h4 class="card__title">卡片标题卡片标题</h4>
</div>
<div class="card__des">口味清爽，最多八个字</div>
<div class="card__action">
<div class="card__price">
<span>¥</span>
<strong>32</strong>
</div>
<div class="card__link">
<svg t="1639970508640" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9201" width="200" height="200">
<path d="M398.933333 326.4l168.533334 168.533333-168.533334 168.533334c-14.933333 14.933333-14.933333 38.4 0 53.333333s38.4 14.933333 53.333334 0l196.266666-196.266667c14.933333-14.933333 14.933333-38.4 0-53.333333l-196.266666-196.266667c-14.933333-14.933333-38.4-14.933333-53.333334 0s-14.933333 40.533333 0 55.466667zM512 981.333333C251.733333 981.333333 42.666667 772.266667 42.666667 512S251.733333 42.666667 512 42.666667s469.333333 209.066667 469.333333 469.333333-209.066667 469.333333-469.333333 469.333333z" p-id="9202" fill="currentColor"></path>
</svg>
</div>
</div>
</div>
</li>
<li class="card">
<div class="card__media">
<img src="https://picsum.photos/640/?random=10" alt="">
<div class="card__badge">年货节</div>
</div>
<div class="card__content">
<div class="card__heading">
<h4 class="card__title">卡片标题卡片标题</h4>
</div>
<div class="card__des">口味清爽，最多八个字</div>
<div class="card__action">
<div class="card__price">
<span>¥</span>
<strong>32</strong>
</div>
<div class="card__link">
<svg t="1639970508640" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9201" width="200" height="200">
<path d="M398.933333 326.4l168.533334 168.533333-168.533334 168.533334c-14.933333 14.933333-14.933333 38.4 0 53.333333s38.4 14.933333 53.333334 0l196.266666-196.266667c14.933333-14.933333 14.933333-38.4 0-53.333333l-196.266666-196.266667c-14.933333-14.933333-38.4-14.933333-53.333334 0s-14.933333 40.533333 0 55.466667zM512 981.333333C251.733333 981.333333 42.666667 772.266667 42.666667 512S251.733333 42.666667 512 42.666667s469.333333 209.066667 469.333333 469.333333-209.066667 469.333333-469.333333 469.333333z" p-id="9202" fill="currentColor"></path>
</svg>
</div>
</div>
</div>
</li>
<li class="card">
<div class="card__media">
<img src="https://picsum.photos/640/?random=11" alt="">
<div class="card__badge">年货节</div>
</div>
<div class="card__content">
<div class="card__heading">
<h4 class="card__title">卡片标题卡片标题</h4>
</div>
<div class="card__des">口味清爽，最多八个字</div>
<div class="card__action">
<div class="card__price">
<span>¥</span>
<strong>32</strong>
</div>
<div class="card__link">
<svg t="1639970508640" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9201" width="200" height="200">
<path d="M398.933333 326.4l168.533334 168.533333-168.533334 168.533334c-14.933333 14.933333-14.933333 38.4 0 53.333333s38.4 14.933333 53.333334 0l196.266666-196.266667c14.933333-14.933333 14.933333-38.4 0-53.333333l-196.266666-196.266667c-14.933333-14.933333-38.4-14.933333-53.333334 0s-14.933333 40.533333 0 55.466667zM512 981.333333C251.733333 981.333333 42.666667 772.266667 42.666667 512S251.733333 42.666667 512 42.666667s469.333333 209.066667 469.333333 469.333333-209.066667 469.333333-469.333333 469.333333z" p-id="9202" fill="currentColor"></path>
</svg>
</div>
</div>
</div>
</li>
<li class="card">
<div class="card__media">
<img src="https://picsum.photos/640/?random=12" alt="">
<div class="card__badge">年货节</div>
</div>
<div class="card__content">
<div class="card__heading">
<h4 class="card__title">卡片标题卡片标题</h4>
</div>
<div class="card__des">口味清爽，最多八个字</div>
<div class="card__action">
<div class="card__price">
<span>¥</span>
<strong>32</strong>
</div>
<div class="card__link">
<svg t="1639970508640" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9201" width="200" height="200">
<path d="M398.933333 326.4l168.533334 168.533333-168.533334 168.533334c-14.933333 14.933333-14.933333 38.4 0 53.333333s38.4 14.933333 53.333334 0l196.266666-196.266667c14.933333-14.933333 14.933333-38.4 0-53.333333l-196.266666-196.266667c-14.933333-14.933333-38.4-14.933333-53.333334 0s-14.933333 40.533333 0 55.466667zM512 981.333333C251.733333 981.333333 42.666667 772.266667 42.666667 512S251.733333 42.666667 512 42.666667s469.333333 209.066667 469.333333 469.333333-209.066667 469.333333-469.333333 469.333333z" p-id="9202" fill="currentColor"></path>
</svg>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="full__bleed section--local">
<div class="content">
<div class="overlay">
<h2>shortbread halvah pie cheesecake.</h2>
<p>Marshmallow powder tart icing donut donut chocolate cake gummi bears halvah. Gingerbread gingerbread donut dragée sweet roll tootsie roll soufflé soufflé. Cotton candy lollipop tiramisu jelly candy tootsie roll. Cupcake cake brownie fruitcake marzipan tootsie roll. </p>
<p> Fruitcake icing lollipop chupa chups tart. Cake tootsie roll gummi bears chocolate gummi bears sesame snaps lemon drops gummi bears. Halvah cotton candy oat cake soufflé biscuit marzipan gummi bears pudding. Tiramisu brownie pie marzipan cupcake carrot cake ice cream chocolate bar. Jelly dragée cotton candy icing powder croissant. Candy apple pie chocolate bar chocolate pudding chocolate bar tart. Shortbread bear claw jelly beans pudding toffee donut wafer cupcake. Sugar plum halvah toffee marzipan jelly beans bonbon lollipop. Cake cupcake jujubes pastry danish muffin donut.</p>
<p>Marshmallow powder tart icing donut donut chocolate cake gummi bears halvah. Gingerbread gingerbread donut dragée sweet roll tootsie roll soufflé soufflé. Cotton candy lollipop tiramisu jelly candy tootsie roll. Cupcake cake brownie fruitcake marzipan tootsie roll. Fruitcake icing lollipop chupa chups tart. Cake tootsie roll gummi bears chocolate gummi bears sesame snaps lemon drops gummi bears. Halvah cotton candy oat cake soufflé biscuit marzipan gummi bears pudding. Tiramisu brownie pie marzipan cupcake carrot cake ice cream chocolate bar. Jelly dragée cotton candy icing powder croissant. Candy apple pie chocolate bar chocolate pudding chocolate bar tart. Shortbread bear claw jelly beans pudding toffee donut wafer cupcake. Sugar plum halvah toffee marzipan jelly beans bonbon lollipop. Cake cupcake jujubes pastry danish muffin donut.</p>
</div>
</div>
</div>
<div class="section">
<div class="section__heading">
<h3 class="section__title">爆款直降</h3>
</div>
<div class="section__body">
<ul class="cards">
<li class="card">
<div class="card__media">
<img src="https://picsum.photos/640/?random=13" alt="">
<div class="card__badge">年货节</div>
</div>
<div class="card__content">
<div class="card__heading">
<h4 class="card__title">卡片标题卡片标题</h4>
</div>
<div class="card__des">口味清爽，最多八个字</div>
<div class="card__action">
<div class="card__price">
<span>¥</span>
<strong>32</strong>
</div>
<div class="card__link">
<svg t="1639970508640" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9201" width="200" height="200">
<path d="M398.933333 326.4l168.533334 168.533333-168.533334 168.533334c-14.933333 14.933333-14.933333 38.4 0 53.333333s38.4 14.933333 53.333334 0l196.266666-196.266667c14.933333-14.933333 14.933333-38.4 0-53.333333l-196.266666-196.266667c-14.933333-14.933333-38.4-14.933333-53.333334 0s-14.933333 40.533333 0 55.466667zM512 981.333333C251.733333 981.333333 42.666667 772.266667 42.666667 512S251.733333 42.666667 512 42.666667s469.333333 209.066667 469.333333 469.333333-209.066667 469.333333-469.333333 469.333333z" p-id="9202" fill="currentColor"></path>
</svg>
</div>
</div>
</div>
</li>
<li class="card">
<div class="card__media">
<img src="https://picsum.photos/640/?random=14" alt="">
<div class="card__badge">年货节</div>
</div>
<div class="card__content">
<div class="card__heading">
<h4 class="card__title">卡片标题卡片标题</h4>
</div>
<div class="card__des">口味清爽，最多八个字</div>
<div class="card__action">
<div class="card__price">
<span>¥</span>
<strong>32</strong>
</div>
<div class="card__link">
<svg t="1639970508640" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9201" width="200" height="200">
<path d="M398.933333 326.4l168.533334 168.533333-168.533334 168.533334c-14.933333 14.933333-14.933333 38.4 0 53.333333s38.4 14.933333 53.333334 0l196.266666-196.266667c14.933333-14.933333 14.933333-38.4 0-53.333333l-196.266666-196.266667c-14.933333-14.933333-38.4-14.933333-53.333334 0s-14.933333 40.533333 0 55.466667zM512 981.333333C251.733333 981.333333 42.666667 772.266667 42.666667 512S251.733333 42.666667 512 42.666667s469.333333 209.066667 469.333333 469.333333-209.066667 469.333333-469.333333 469.333333z" p-id="9202" fill="currentColor"></path>
</svg>
</div>
</div>
</div>
</li>
<li class="card">
<div class="card__media">
<img src="https://picsum.photos/640/?random=15" alt="">
<div class="card__badge">年货节</div>
</div>
<div class="card__content">
<div class="card__heading">
<h4 class="card__title">卡片标题卡片标题</h4>
</div>
<div class="card__des">口味清爽，最多八个字</div>
<div class="card__action">
<div class="card__price">
<span>¥</span>
<strong>32</strong>
</div>
<div class="card__link">
<svg t="1639970508640" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9201" width="200" height="200">
<path d="M398.933333 326.4l168.533334 168.533333-168.533334 168.533334c-14.933333 14.933333-14.933333 38.4 0 53.333333s38.4 14.933333 53.333334 0l196.266666-196.266667c14.933333-14.933333 14.933333-38.4 0-53.333333l-196.266666-196.266667c-14.933333-14.933333-38.4-14.933333-53.333334 0s-14.933333 40.533333 0 55.466667zM512 981.333333C251.733333 981.333333 42.666667 772.266667 42.666667 512S251.733333 42.666667 512 42.666667s469.333333 209.066667 469.333333 469.333333-209.066667 469.333333-469.333333 469.333333z" p-id="9202" fill="currentColor"></path>
</svg>
</div>
</div>
</div>
</li>
<li class="card">
<div class="card__media">
<img src="https://picsum.photos/640/?random=16" alt="">
<div class="card__badge">年货节</div>
</div>
<div class="card__content">
<div class="card__heading">
<h4 class="card__title">卡片标题卡片标题</h4>
</div>
<div class="card__des">口味清爽，最多八个字</div>
<div class="card__action">
<div class="card__price">
<span>¥</span>
<strong>32</strong>
</div>
<div class="card__link">
<svg t="1639970508640" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9201" width="200" height="200">
<path d="M398.933333 326.4l168.533334 168.533333-168.533334 168.533334c-14.933333 14.933333-14.933333 38.4 0 53.333333s38.4 14.933333 53.333334 0l196.266666-196.266667c14.933333-14.933333 14.933333-38.4 0-53.333333l-196.266666-196.266667c-14.933333-14.933333-38.4-14.933333-53.333334 0s-14.933333 40.533333 0 55.466667zM512 981.333333C251.733333 981.333333 42.666667 772.266667 42.666667 512S251.733333 42.666667 512 42.666667s469.333333 209.066667 469.333333 469.333333-209.066667 469.333333-469.333333 469.333333z" p-id="9202" fill="currentColor"></path>
</svg>
</div>
</div>
</div>
</li>
<li class="card">
<div class="card__media">
<img src="https://picsum.photos/640/?random=17" alt="">
<div class="card__badge">年货节</div>
</div>
<div class="card__content">
<div class="card__heading">
<h4 class="card__title">卡片标题卡片标题</h4>
</div>
<div class="card__des">口味清爽，最多八个字</div>
<div class="card__action">
<div class="card__price">
<span>¥</span>
<strong>32</strong>
</div>
<div class="card__link">
<svg t="1639970508640" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9201" width="200" height="200">
<path d="M398.933333 326.4l168.533334 168.533333-168.533334 168.533334c-14.933333 14.933333-14.933333 38.4 0 53.333333s38.4 14.933333 53.333334 0l196.266666-196.266667c14.933333-14.933333 14.933333-38.4 0-53.333333l-196.266666-196.266667c-14.933333-14.933333-38.4-14.933333-53.333334 0s-14.933333 40.533333 0 55.466667zM512 981.333333C251.733333 981.333333 42.666667 772.266667 42.666667 512S251.733333 42.666667 512 42.666667s469.333333 209.066667 469.333333 469.333333-209.066667 469.333333-469.333333 469.333333z" p-id="9202" fill="currentColor"></path>
</svg>
</div>
</div>
</div>
</li>
<li class="card">
<div class="card__media">
<img src="https://picsum.photos/640/?random=18" alt="">
<div class="card__badge">年货节</div>
</div>
<div class="card__content">
<div class="card__heading">
<h4 class="card__title">卡片标题卡片标题</h4>
</div>
<div class="card__des">口味清爽，最多八个字</div>
<div class="card__action">
<div class="card__price">
<span>¥</span>
<strong>32</strong>
</div>
<div class="card__link">
<svg t="1639970508640" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9201" width="200" height="200">
<path d="M398.933333 326.4l168.533334 168.533333-168.533334 168.533334c-14.933333 14.933333-14.933333 38.4 0 53.333333s38.4 14.933333 53.333334 0l196.266666-196.266667c14.933333-14.933333 14.933333-38.4 0-53.333333l-196.266666-196.266667c-14.933333-14.933333-38.4-14.933333-53.333334 0s-14.933333 40.533333 0 55.466667zM512 981.333333C251.733333 981.333333 42.666667 772.266667 42.666667 512S251.733333 42.666667 512 42.666667s469.333333 209.066667 469.333333 469.333333-209.066667 469.333333-469.333333 469.333333z" p-id="9202" fill="currentColor"></path>
</svg>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="full__bleed section--bg4">
</div>
</div>@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
min-height: 100vh;
font-family: "Exo", Arial, sans-serif;
background-color: #f4f4f4;
color: #fff;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: min-content 1fr;
}
.container {
min-height: 0;
width: 100vw;
--limit-max-container-width: 75ch;
--limit-min-container-width: 280px;
--gutter: 1rem;
display: grid;
grid-template-columns:
1fr clamp(
var(--limit-min-container-width),
100% - var(--gutter) * 2,
var(--limit-max-container-width)
)
1fr;
gap: var(--gutter);
}
.container > * {
grid-column: 2;
}
.full__bleed {
width: 100%;
grid-column: 1 / -1;
}
h1 {
font-weight: 700;
}
p {
max-width: 52ch;
line-height: 1.5;
padding: 1em;
}
.form {
padding: 1rem;
background-color: rgb(0 0 0 / 0.6);
backdrop-filter: blur(20px);
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 9999;
}
.form select {
padding: 0.25em 0.5em;
font-size: inherit;
}
.hero {
display: flex;
align-items: center;
justify-content: center;
min-height: 400px;
}
.hero h1 {
width: min(100%, 65ch);
font-size: clamp(0.85rem, 1vw + 1.25rem, 1.5rem);
text-align: center;
color: #444;
}
h1 code {
background-color: #a6e2f0;
padding: 0.25em 1rem;
border-radius: 0.25em;
font-size: 0.8em;
display: inline-flex;
align-items: center;
justify-content: center;
color: #0a5967;
font-wegiht: 300;
}
#value {
background: #0d5867;
color: #dcefae;
padding: 0.1em 0.5em;
margin-left: 0.12em;
line-height: 1;
border-radius: 0.2em;
}
img {
max-width: 100%;
height: auto;
vertical-align: top;
}
svg {
width: 1em;
height: 1em;
}
ul {
list-style: none outside none;
}
.section {
display: flex;
flex-direction: column;
width: 100%;
justify-self: center;
}
.section__heading {
display: flex;
align-items: center;
color: #333;
margin-bottom: 24px;
}
.section__title {
font-size: 32px;
font-weight: 500;
}
.cards {
--gap: 18px;
--min-width: 220px;
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(min(var(--min-width), 100%), 1fr)
);
gap: var(--gap);
}
.card {
background-color: #fff;
border-radius: 12px;
display: flex;
flex-direction: column;
}
.card__media {
position: relative;
border-radius: 12px 12px 0 0;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
padding: 14px;
min-height: 220px;
}
.card__media .card__badge {
position: absolute;
background-image: linear-gradient(90deg, #ff5000 0%, #ff0552 99%);
border-radius: 4px;
color: #fff;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 2px 4px;
font-size: 20px;
font-weight: 700;
line-height: 1;
left: 14px;
bottom: -12px;
}
.card__content {
display: flex;
flex-direction: column;
padding: 0 14px 24px;
}
.card__title {
font-weight: 500;
font-size: 24px;
color: #333333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 8px;
}
.card__des {
max-width: 8em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 20px;
color: #ba9663;
margin-bottom: 18px;
}
.card__action {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 500;
font-size: 32px;
color: #ff5000;
line-height: 1;
}
.card__price {
display: inline-flex;
align-items: flex-end;
}
.card__price span {
font-weight: normal;
font-size: 24px;
position: relative;
bottom: 0.125em;
}
.card__link {
font-size: 32px;
font-weight: normal;
display: inline-flex;
justify-content: center;
align-items: center;
}
.section--bg {
min-height: 400px;
}
:root {
--attachment: scroll;
}
.full__bleed {
background-position: 0 0;
background-size: cover;
background-attachment: var(--attachment);
background-color: rgb(90 192 22 / 0.6);
}
.hero {
background-image: url("https://picsum.photos/2016/1642?image=100");
}
.section--bg {
background-image: url("https://picsum.photos/2016/1642?image=10");
}
.section--bg4 {
background-image: url("https://picsum.photos/2016/1642?image=60");
min-height: 400px;
}
.section--local .content {
width: 100%;
aspect-ratio: 16/9;
margin: 0 auto;
position: relative;
z-index: 2;
padding: 1rem;
background-image: url("https://picsum.photos/2016/1642?image=20");
max-height: 50vh;
overflow-y: auto;
position: relative;
background-attachment: var(--attachment);
scroll-behavior: smooth;
overscroll-behavior: contain;
}
.overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: max-content;
background: hsla(0deg, 0%, 0%, 0.8);
padding: 2rem;
color: white;
line-height: 1.7;
display: flex;
flex-direction: column;
align-items: center;
}
.section--local p {
margin-top: 2rem;
}
const rootElement = document.documentElement;
const repeatHander = document.getElementById("background-attachment");
const attachmentVal = document.getElementById("value");
repeatHander.addEventListener("change", (etv) => {
rootElement.style.setProperty("--attachment", etv.target.value);
attachmentVal.textContent = etv.target.value;
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.