CSS-скрынка-мадэль тлумачыцца прыкладамі.

Сёння я растлумачу акно-мадэль пры дапамозе CSS background-clip і background-origin уласнасці. Якія ўласцівасці background-clip і background-origin? Для чаго яны выкарыстоўваюцца і чым адрозніваецца кожны з іх?

Ну, гэта пытанне, якое ідзе ад розуму пачаткоўца да прамежкавага ўзроўню вэб-распрацоўнікаў. Некаторыя з іх некалькі знаёмыя з ім, а іншыя дагэтуль цікавяцца, дзе можна выкарыстоўваць гэтыя 2 ўласцівасці.

Ну, перш чым вы зможаце зразумець гэтыя 2 ўласцівасці, вам трэба зразумець акно-мадэль CSS. Такім чынам, пачнем з гэтага.

Спачатку стварыце "div" і пастаўце ўнутры яго тэг "p",

некаторае змесціва тут…

а потым надайце ёй некалькі стыляў.

<стыль>
дзіў {
 фон: # 666;
 шырыня: 300px;
 вышыня: 250px;
}
р {
 шырыня: 200px;
 фон: чырвоны;
}

Як вы бачыце, што элементу "div" мы не давалі ніякай абіўкі альбо аблямоўкі, таму элемент "div" яшчэ не мае ніводнай скрынкі, ні рамкі, і цэлае поле лічыцца полем для змесціва.

Як паказана на малюнку ніжэй.

Вы можаце праверыць сябе, адкрыўшы інструмент для распрацоўшчыка Chrome

Цяпер дайце "div" некалькі падшывак у 50 пікселяў зверху, знізу, злева, справа.

дзіў {
 фон: # 666;
 шырыня: 300px;
 вышыня: 250px;
 абіўка: 50px; // абіванне зверху, знізу, злева, направа
}

Цяпер у нас ёсць ватовая коробка памерам 50px, а акно змесціва знаходзіцца ўнутры абіўкі, як паказана на малюнку ніжэй.

Цяпер у нас нарэшце 50-пікс

Зараз выдалім шырыню элемента "p", каб ён пашырыўся і прыняў усю шырыню акна змесціва.

р {
 фон: чырвоны;
}

Вы можаце ўбачыць вынік на малюнку ніжэй.

Элемент

Скажам, вы дадалі фонавае малюнак у "div" і ўсталюеце яго фонавы памер на "содержать", каб ён змяніў свой памер ўнутры скрынкі, і вы таксама далі яму рамку, таму што без межаў няма рамкі.

дзіў {
 фон: # 666 URL ('https://bit.ly/2gzkSPX') не паўтарыць;
 фонавы памер: утрымліваць;
 мяжа: 10px суцэльнага чорнага колеру;
 шырыня: 300px;
 вышыня: 250px;
 абіўка: 50px;
}

Тады гэта будзе выглядаць так, як паказана на малюнку ніжэй.

Вы таксама можаце праверыць гэта, увайшоўшы ў інструмент для распрацоўшчыка храмавання і навядзіце курсор мышы на скрынку-мадэль, як паказана на малюнку

Па змаўчанні фонавае паходжанне Дзіва усталявана ў аўтазагрузку, а значыць, малюнак пачнецца з рамкі, а таксама будзе бачна ў акне змесціва, бо акно змесціва знаходзіцца ўнутры вагонкі.

фонавае паходжанне: вагонка; / * значэнне па змаўчанні * /

Скажам, мы хочам, каб малюнак пачынаўся з аўтазагрузкі, але мы хочам толькі раскрыць тую частку выявы, якая знаходзіцца ў кантэксце кантэксту, тады нам трэба ўсталяваць фонавы кліп Дзіва ў поле змесціва.

дзіў {
 фон: # 666 URL ('https://bit.ly/2gzkSPX') не паўтарыць;
 фонавы памер: утрымліваць;
 фон-кліп: акно змесціва;
 мяжа: 10px суцэльнага чорнага колеру;
 шырыня: 300px;
 вышыня: 250px;
 абіўка: 50px;
}

Вы можаце бачыць вынікі на малюнку ніжэй, што бачная толькі частка выявы, размешчаная ў акне змесціва, але выява пачынаецца з абіўкі, таму што па змаўчанні "background-orgin" па змаўчанні.

Як бачыце, бачная толькі частка выявы, якая знаходзіцца ў акне змесціва, а астатняе - схавана

Давайце таксама раскрыем частку фонавага малюнка, якая ўваходзіць у абіўную скрынку, для гэтага нам трэба вярнуць дзіўны фонавы кліп назад у вагонку, якая была значэннем па змаўчанні, перш чым мы змянілі яго.

дзіў {
 фон: # 666 URL ('https://bit.ly/2gzkSPX') не паўтарыць;
 фонавы памер: утрымліваць;
 фон-кліп: абіўка;
 мяжа: 10px суцэльнага чорнага колеру;
 шырыня: 300px;
 вышыня: 250px;
 абіўка: 50px;
}

Вы бачыце ў выніках ніжэй, што зараз частка выявы, якая ўваходзіць у аўтазагрузку, таксама бачная, таму што мы ўсталявалі фонавы кліп назад у аўтазагрузку.

Цяпер мы можам таксама ўбачыць частку выявы, якая знаходзіцца ўнутры вагонкі

Давайце пераканайцеся, што фонавы малюнак нашага дзіва пачынаецца з бардзюра, і для гэтага нам трэба даць нашаму "дзіву" фонавае паходжанне рамкі. Але спачатку давайце павялічыць памер мяжы, каб заўважыць розніцу.

дзіў {
 фон: # 666 URL ('https://bit.ly/2gzkSPX') не паўтарыць;
 фонавы памер: утрымліваць;
 фонавае паходжанне: пагранічная скрынка;
 фон-кліп: абіўка;
 мяжа: 20px суцэльнага чорнага колеру; / * Шырыня мяжы зараз 20 пікселяў * /
 шырыня: 300px;
 вышыня: 250px;
 абіўка: 50px;
}

Як вы можаце бачыць на малюнку ніжэй, таму што фонавае малюнак зараз пачынаецца з рамкі, таму невялікая частка выявы пакрыта чорнай аблямоўкай, інакш кажучы, частка выявы знаходзіцца за чорнай аблямоўкай.

Цяпер выява пачынаецца з бардзюра

Зараз, каб даказаць свой пункт гледжання, што малюнак пачынаецца з рамкі, і таму невялікая частка выявы знаходзіцца за чорнай аблямоўкай, давайце надаём рамцы нейкую непразрыстасць, каб яна магла бляднець, і мы маглі бачыць тую частку малюнка, якая знаходзіцца за мяжой.

дзіў {
 фон: # 666 URL ('https://bit.ly/2gzkSPX') не паўтарыць;
 фонавы памер: утрымліваць;
 фонавае паходжанне: пагранічная скрынка;
 фон-кліп: абіўка;
 мяжа: 20px цвёрдага rgba (0,0,0,0,5); / * з дапамогай rgba () * /
 шырыня: 300px;
 вышыня: 250px;
 абіўка: 50px;
}
Тут вы можаце ўбачыць выявы знікаючых межаў

Вось, зараз вы можаце ўбачыць тую частку малюнка, якая знаходзіцца за мяжой, і гэта таксама даказвае, што зараз выява пачынаецца з рамкі, бо мы паходжаем фон ад паходжання да рамкі.

Цяпер вы ведаеце розніцу паміж фонавым паходжаннем і фонам-кліпам, а таксама ведаеце пра CSS-мадэль боксу. Надышоў час, калі вы пачнеце ствараць нейкія дзіўныя рэчы. #Goodluck

Калі вы прапусцілі маю папярэднюю артыкул пра даступнасць Інтэрнэту, то вось спасылка на яе, не забудзьцеся прачытаць яе. КЛІКНІЦЕ ТУТ