#javascript #html #css
#язык JavaScript #HTML #CSS
Вопрос:
Я хочу, чтобы эти черные точки с бумагами были показаны здесь:
body { background: linear-gradient(#ccc, #fff); font: 14px sans-serif; padding: 20px; } .letter { background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); margin: 26px auto 0; max-width: 550px; min-height: 300px; padding: 40px; position: relative; width: 80%; background: radial-gradient(#575450 6px, #fafafa 7px) repeat-y; background-size: 30px 30px; } .letter:before, .letter:after { content: ""; height: 98%; position: absolute; width: 100%; z-index: -1; } .letter:before { background: #fafafa; box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); left: -5px; top: 4px; transform: rotate(-2.5deg); } .letter:after { background: #f6f6f6; box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); right: -3px; top: 1px; transform: rotate(1.4deg); } lt;divgt; lt;div class="letter"gt; lt;hrgt; lt;h3gt;introduction.jslt;/h3gt; lt;pgt;Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests. This guide is running against Jasmine version 2.3.0.lt;/pgt; lt;h3gt;Standalone Distributionlt;/h3gt; lt;pgt;The releases page has links to download the standalone distribution, which contains everything you need to start running Jasmine. After downloading a particular version and unzipping, opening SpecRunner.html will run the included specs. You’ll note that both the source files and their respective specs are linked in the lt;headgt; of the SpecRunner.html. To start using Jasmine, replace the source/spec files with your own.lt;/pgt; lt;hrgt; lt;/divgt; lt;/divgt; Чтобы добиться такого графического дизайна, я использовал radial-gradient repeat-y вот так на бумаге:
background: radial-gradient(#575450 6px, #fafafa 7px) repeat-y; background-size: 30px 30px; Но, как вы видите, это портит сплошной фон бумаги, и я получаю прозрачную бумагу вместо сплошной белой бумаги. Это важно и вызывает проблемы, если вы хотите положить еще одну стопку бумаг поверх текущей, верно??
Вы можете видеть каждую бумагу насквозь…
Как я могу получить такой эффект, не теряя сплошной фон бумаги?
Ответ №1:
Вы могли бы сделать конец радиального градиента (во внешней части) чисто белым, и аналогично с цветом фона.
В этом фрагменте описываются различные настройки фона, чтобы сделать его немного более понятным (т. Е. Чтобы один фон: не перезаписывал другой).
body { background: linear-gradient(#ccc, #fff); font: 14px sans-serif; padding: 20px; } .letter { background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); margin: 26px auto 0; max-width: 550px; min-height: 300px; padding: 40px; position: relative; width: 80%; background: radial-gradient(#575450 6px, #fafafa 7px, #ffffff 8px 100%) repeat-y; background-size: 30px 30px; background-color: #ffffff; } .letter:before, .letter:after { content: ""; height: 98%; position: absolute; width: 100%; z-index: -1; } .letter:before { background: #fafafa; box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); left: -5px; top: 4px; transform: rotate(-2.5deg); } .letter:after { background: #f6f6f6; box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); right: -3px; top: 1px; transform: rotate(1.4deg); } lt;divgt; lt;div class="letter"gt; lt;hrgt; lt;h3gt;introduction.jslt;/h3gt; lt;pgt;Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests. This guide is running against Jasmine version 2.3.0.lt;/pgt; lt;h3gt;Standalone Distributionlt;/h3gt; lt;pgt;The releases page has links to download the standalone distribution, which contains everything you need to start running Jasmine. After downloading a particular version and unzipping, opening SpecRunner.html will run the included specs. You’ll note that both the source files and their respective specs are linked in the lt;headgt; of the SpecRunner.html. To start using Jasmine, replace the source/spec files with your own.lt;/pgt; lt;hrgt; lt;/divgt; lt;/divgt; Ответ №2:
Вы можете добавить элемент, содержащий отверстия, применяя к .letter элементу сплошной фон:
lt;divgt; lt;div class="letter"gt; lt;div class="page-holes"gt;lt;/divgt; lt;hrgt; lt;h3gt;introduction.jslt;/h3gt; lt;pgt;Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests. This guide is running against Jasmine version 2.3.0.lt;/pgt; lt;h3gt;Standalone Distributionlt;/h3gt; lt;pgt;The releases page has links to download the standalone distribution, which contains everything you need to start running Jasmine. After downloading a particular version and unzipping, opening SpecRunner.html will run the included specs. You’ll note that both the source files and their respective specs are linked in the lt;headgt; of the SpecRunner.html. To start using Jasmine, replace the source/spec files with your own.lt;/pgt; lt;hrgt; lt;/divgt; lt;/divgt;