{"id":302114,"date":"2020-04-18T15:00:27","date_gmt":"2020-04-18T15:00:27","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=302114"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=302114","title":{"rendered":"\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u0432 \u0432\u0435\u0431 [\u0432 \u0437\u0430\u043a\u043b\u0430\u0434\u043a\u0438]"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/company\/ruvds\/blog\/497876\/\">\u041e\u0434\u043d\u043e \u0438\u0437 \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0441\u0430\u0439\u0442\u0430, \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0432\u044b\u0431\u043e\u0440\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 \u0441\u043e\u0441\u0442\u0430\u0432 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446. \u042d\u0442\u043e\u0442 \u0441\u043f\u043e\u0441\u043e\u0431 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 HTML-\u0442\u0435\u0433\u0430 <code>&lt;img&gt;<\/code>. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>background<\/code> \u0438\u043b\u0438 \u0442\u0435\u0433\u0430 <code>&lt;image&gt;<\/code> \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;svg&gt;<\/code>. \u0412\u044b\u0431\u043e\u0440 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u043a \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u0432\u0435\u0441\u044c\u043c\u0430 \u0432\u0430\u0436\u0435\u043d, \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u0441\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<p>  <a href=\"https:\/\/habr.com\/ru\/company\/ruvds\/blog\/497876\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/_t\/31\/qj\/_t31qjds7ipvwbz86ednq8q8skk.jpeg\"><\/a><\/p>\n<p>  \u041c\u0430\u0442\u0435\u0440\u0438\u0430\u043b, \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u043f\u0443\u0431\u043b\u0438\u043a\u0443\u0435\u043c, \u043f\u043e\u0441\u0432\u044f\u0449\u0451\u043d \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 \u0441\u043e\u0441\u0442\u0430\u0432 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446. \u0417\u0434\u0435\u0441\u044c \u0431\u0443\u0434\u0443\u0442 \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u044b \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 \u044d\u0442\u0438\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0442\u043e\u043c, \u043a\u043e\u0433\u0434\u0430 \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u0438\u0445 \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442.<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h2><font color=\"#3AC1EF\">HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;img&gt;<\/font><\/h2>\n<p>  \u042d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;img&gt;<\/code> \u0432 \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430\u0445 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043b\u0438\u0448\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0434\u043b\u044f \u0435\u0433\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>src<\/code>:<\/p>\n<pre><code class=\"html\">&lt;img src=&quot;cool.jpg&quot; alt=&quot;&quot;&gt; <\/code><\/pre>\n<p>  <\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 width \u0438 height<\/font><\/h3>\n<p>  \u0415\u0441\u043b\u0438 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u044b \u0448\u0438\u0440\u0438\u043d\u0430 \u0438 \u0432\u044b\u0441\u043e\u0442\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0442\u043e \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0441 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u0430\u043a\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u043f\u0435\u0440\u0435\u0441\u0442\u0440\u043e\u0438\u0442\u044c. \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u043e\u0433\u043e \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c, \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b <code>width<\/code> \u0438 <code>height<\/code> \u0442\u0435\u0433\u0430 <code>&lt;img&gt;<\/code>:<\/p>\n<pre><code class=\"html\">&lt;img src=&quot;cool.jpg&quot; width=&quot;200&quot; height=&quot;100&quot; alt=&quot;&quot;&gt; <\/code><\/pre>\n<p>  \u0425\u043e\u0442\u044f \u043a\u043e\u043c\u0443-\u0442\u043e \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043c\u043e\u0436\u0435\u0442 \u0441\u043b\u0435\u0433\u043a\u0430 \u043d\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u0442\u0430\u043a \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u00ab\u0441\u0442\u0430\u0440\u0443\u044e \u0448\u043a\u043e\u043b\u0443\u00bb, \u043e\u043d, \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u043e\u043b\u0435\u0437\u0435\u043d. \u0414\u0430\u0432\u0430\u0439\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u043b\u0443\u0447\u0448\u0435 \u0432 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u0432\u044b\u0448\u0435\u0441\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c. \u0410 \u0438\u043c\u0435\u043d\u043d\u043e, \u044f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0432\u0430\u043c \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"https:\/\/ishadeed.com\/assets\/image-techniques\/img-width-height.mp4\">\u044d\u0442\u043e \u043a\u043e\u0440\u043e\u0442\u043a\u043e\u0435 \u0432\u0438\u0434\u0435\u043e<\/a>.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/d32\/a6b\/51a\/d32a6b51acda0d4670430b8ee20681c0.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u041a\u0430\u0434\u0440 \u0438\u0437 \u0432\u0438\u0434\u0435\u043e. \u0423 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043b\u0435\u0432\u0430 \u0448\u0438\u0440\u0438\u043d\u0430 \u0438 \u0432\u044b\u0441\u043e\u0442\u0430 \u043d\u0435 \u0437\u0430\u0434\u0430\u043d\u044b. \u0423 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043f\u0440\u0430\u0432\u0430 \u2014 \u0437\u0430\u0434\u0430\u043d\u044b<\/font><\/i><\/p>\n<p>  \u0417\u0434\u0435\u0441\u044c \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u0430 \u043f\u0430\u043d\u0435\u043b\u044c <code>Network<\/code> \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438 \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0430\u0440\u044b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. \u041e\u0434\u043d\u043e \u0438\u0437 \u043d\u0438\u0445, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0435 \u0441\u043b\u0435\u0432\u0430, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043e \u0442\u0435\u0433\u043e\u043c <code>&lt;img&gt;<\/code>, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b <code>width<\/code> \u0438 <code>height<\/code> \u043d\u0435 \u0437\u0430\u0434\u0430\u043d\u044b. \u0423 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u044d\u0442\u0438\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0437\u0430\u0434\u0430\u043d\u044b.<\/p>\n<p>  \u0412\u044b \u0437\u0430\u043c\u0435\u0442\u0438\u043b\u0438, \u0447\u0442\u043e \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043c\u0435\u0441\u0442\u043e \u043f\u043e\u0434 \u043f\u0440\u0430\u0432\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0440\u0435\u0437\u0435\u0440\u0432\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0435\u0449\u0451 \u0434\u043e \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u044d\u0442\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043e? \u0412\u0441\u0451 \u0434\u0435\u043b\u043e \u0432 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u0445 <code>width<\/code> \u0438 <code>height<\/code>. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0438 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441 \u043f\u043e\u0434\u043f\u0438\u0441\u044f\u043c\u0438 \u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0438\u0445 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. \u042d\u0442\u043e \u2014 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u0430\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0441\u0438\u043b\u044b \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 <code>width<\/code> \u0438 <code>height<\/code>.<\/p>\n<p>  \u2192 <a href=\"https:\/\/codepen.io\/shadeed\/pen\/a42ab701809acfecdd4d8f472bb6c043?editors=0100\">\u0412\u043e\u0442<\/a> \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u0421\u043a\u0440\u044b\u0442\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 CSS<\/font><\/h3>\n<p>  \u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0440\u044b\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS. \u041f\u0440\u0430\u0432\u0434\u0430, \u0442\u0430\u043a\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u044f \u0442\u0430\u043a, \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0441\u043e\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u043e\u0441\u0442\u044c. \u0415\u0441\u043b\u0438 \u043d\u0435\u043a\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0443\u0436\u043d\u043e \u0441\u043a\u0440\u044b\u0442\u044c, \u0442\u043e \u043e\u043d\u043e, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043b\u0438\u0448\u044c \u0432 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0446\u0435\u043b\u044f\u0445.<\/p>\n<p>  \u0412\u043e\u0442 CSS-\u043a\u043e\u0434, \u0441\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435:<\/p>\n<pre><code class=\"css\">img { \u00a0\u00a0\u00a0\u00a0display: none; } <\/code><\/pre>\n<p>  \u041f\u043e\u0432\u0442\u043e\u0440\u044e\u0441\u044c: \u043f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u0434\u0435\u043b\u0430\u044f \u044d\u0442\u043e \u0434\u0430\u0436\u0435 \u0432 \u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u043e\u043d\u043e \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u0432\u0438\u0434\u0438\u043c\u044b\u043c. \u0414\u0435\u043b\u043e \u0442\u0443\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;img&gt;<\/code> \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/CSS\/%D0%97%D0%B0%D0%BC%D0%B5%D1%89%D0%B0%D0%B5%D0%BC%D1%8B%D0%B9_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82\">\u0437\u0430\u043c\u0435\u0449\u0430\u0435\u043c\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c<\/a>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u0448\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u0442\u0430\u043a\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u0438\u0437 CSS \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u044b.<\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u041e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430<\/font><\/h3>\n<p>  \u0414\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0432\u044b\u0432\u043e\u0434\u0438\u043c\u044b\u0445 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;img&gt;<\/code>, \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0438\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438 <code>alt<\/code>. \u0412 \u0442\u0430\u043a\u043e\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u043d\u044f\u0442\u043d\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0449\u0438\u043c \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f \u0441 \u044d\u043a\u0440\u0430\u043d\u0430.<\/p>\n<p>  \u041e\u0434\u043d\u0430\u043a\u043e \u0432 \u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u0432 <code>alt<\/code>-\u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u043d\u0443\u0436\u0434\u0430\u0435\u0442\u0441\u044f, \u044d\u0442\u043e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442, \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e, \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u043d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f. \u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0442\u043e \u00ab\u043e\u0437\u0432\u0443\u0447\u0435\u043d\u043e\u00bb \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>src<\/code>. \u042d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u043b\u043e\u0445\u043e \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430.<\/p>\n<p>  \u041d\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>alt<\/code> \u043f\u043e\u043b\u0435\u0437\u0435\u043d \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435. \u0415\u0441\u043b\u0438 \u043f\u043e \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043e, \u0438 \u0443 \u043d\u0435\u0433\u043e \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>alt<\/code>, \u0442\u043e \u0442\u0435\u043a\u0441\u0442 \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0432\u0435\u0434\u0435\u043d \u0432\u043c\u0435\u0441\u0442\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0425\u043e\u0447\u0443 \u043f\u0440\u043e\u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u044b\u0448\u0435\u0441\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c.<\/p>\n<p>  \u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u0430\u0440\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439:<\/p>\n<pre><code class=\"html\">&lt;img class=&quot;food-thumb&quot; width=&quot;300&quot; height=&quot;200&quot; src=&quot;cheescake.jpg&quot;&gt; &lt;img class=&quot;food-thumb&quot; width=&quot;300&quot; height=&quot;200&quot; src=&quot;cheescake.jpg&quot; alt=&quot;&quot;&gt; <\/code><\/pre>\n<p>  \u0412 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0435 <code>src<\/code> \u0437\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0430\u0434\u0440\u0435\u0441 \u043a \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u043c\u0443 \u0444\u0430\u0439\u043b\u0443, \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c. \u0423 \u043f\u0435\u0440\u0432\u043e\u0433\u043e <code>&lt;img&gt;<\/code> \u043d\u0435\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>alt<\/code>, \u0430 \u0443 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u043f\u0443\u0441\u0442\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430. \u041a\u0430\u043a \u0432\u044b \u0434\u0443\u043c\u0430\u0435\u0442\u0435, \u043a\u0430\u043a \u044d\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0432\u0435\u0434\u0435\u043d\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435?<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/fc9\/034\/6c9\/fc90346c9bcc883f19614d1e1559e9b9.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u0421\u043b\u0435\u0432\u0430 \u2014 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0431\u0435\u0437 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 alt. \u0421\u043f\u0440\u0430\u0432\u0430 \u2014 \u0441 \u043f\u0443\u0441\u0442\u044b\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c alt<\/font><\/i><\/p>\n<p>  \u041f\u043e\u0434 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0431\u0435\u0437 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>alt<\/code> \u0440\u0435\u0437\u0435\u0440\u0432\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043f\u0443\u0442\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u0443\u0445\u0443\u0434\u0448\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430. \u0410 \u0434\u0440\u0443\u0433\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u043e\u0432\u0441\u0435\u043c \u043c\u0430\u043b\u043e \u043c\u0435\u0441\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u00ab\u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e\u00bb \u043f\u0443\u0441\u0442\u043e\u0433\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>alt<\/code>. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043e\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u0442\u043e\u0447\u043a\u0443, \u0430 \u043d\u0435 \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435. \u041f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u044d\u0442\u043e \u0438-\u0437\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>border<\/code> \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  \u041f\u0440\u0430\u0432\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>alt<\/code> \u0447\u0442\u043e-\u0442\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u043e, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0443\u0436\u0435 \u043f\u043e-\u0434\u0440\u0443\u0433\u043e\u043c\u0443.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/ad1\/04a\/793\/ad104a79386815b6e9a4464273fe8ce3.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u0421\u043f\u0440\u0430\u0432\u0430 \u2014 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 alt \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u043d \u0442\u0435\u043a\u0441\u0442<\/font><\/i><\/p>\n<p>  \u042d\u0442\u043e \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043b\u0443\u0447\u0448\u0435, \u0447\u0435\u043c \u043d\u0438\u0447\u0435\u0433\u043e. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0435\u0441\u043b\u0438 \u043d\u0435 \u0443\u0434\u0430\u0451\u0442\u0441\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0444\u0430\u0439\u043b, \u0432\u044b\u0432\u043e\u0434\u0438\u043c\u044b\u0439 \u0432 <code>&lt;img&gt;<\/code>, \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a \u043d\u0435\u043c\u0443 <a href=\"https:\/\/bitsofco.de\/styling-broken-images\/\">\u043f\u0441\u0435\u0432\u0434\u043e-\u044d\u043b\u0435\u043c\u0435\u043d\u0442<\/a>.<\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u041e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/font><\/h3>\n<p>  <\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/57f\/0e0\/386\/57f0e03868f5c58c02a8c23a5a1d3ed6.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432<\/font><\/i><\/p>\n<p>  \u042d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;img&gt;<\/code> \u0445\u043e\u0440\u043e\u0448 \u0442\u0435\u043c, \u0447\u0442\u043e \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0432\u044b\u0432\u043e\u0434\u0438\u043b \u0431\u044b \u0440\u0430\u0437\u043d\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u044f\u0445 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0440\u0430\u0437\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430. \u042d\u0442\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0445 \u0432 \u0441\u0442\u0430\u0442\u044c\u044f\u0445.<\/p>\n<p>  \u041e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0434\u0432\u0443\u043c\u044f \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438.<\/p>\n<h4><font color=\"#333\">1. \u0410\u0442\u0440\u0438\u0431\u0443\u0442 srcset<\/font><\/h4>\n<p>  \u0412\u043e\u0442 \u043a\u043e\u0434 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>srcset<\/code>:<\/p>\n<pre><code class=\"html\">&lt;img src=&quot;small.jpg&quot; srcset=&quot;medium.jpg 500w, large.jpg 800w&quot; alt=&quot;&quot;&gt; <\/code><\/pre>\n<p>  \u042d\u0442\u043e \u2014 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440. \u042f \u043d\u0435 \u0441\u0447\u0438\u0442\u0430\u044e \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <code>srcset<\/code> \u0434\u043b\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432, \u0432\u044b\u0432\u043e\u0434\u0438\u043c\u044b\u0445 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0430\u0445 \u0441 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u0430\u043c\u0438. \u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0432 \u0442\u0430\u043a\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0441\u043b\u043e\u0432\u043e \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0437\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c, \u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430 \u0432\u044b\u0431\u043e\u0440 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043f\u043e\u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0435 \u043c\u043e\u0436\u0435\u0442.<\/p>\n<h4><font color=\"#333\">2. HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442 picture<\/font><\/h4>\n<p>  \u0412\u043e\u0442 \u043a\u043e\u0434, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;picture&gt;<\/code>:<\/p>\n<pre><code class=\"html\">&lt;picture&gt; \u00a0\u00a0&lt;source srcset=&quot;large.jpg&quot; media=&quot;(min-width: 800px)&quot; \/&gt; \u00a0\u00a0&lt;source srcset=&quot;medium.jpg&quot; media=&quot;(min-width: 500px)&quot; \/&gt; \u00a0\u00a0&lt;img src=&quot;small.jpg&quot; \/&gt; &lt;\/picture&gt; <\/code><\/pre>\n<p>  \u0414\u0440\u0443\u0433\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;picture&gt;<\/code>. \u041c\u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u044d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u0438\u0437-\u0437\u0430 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043e\u043d \u043f\u0440\u043e\u0449\u0435, \u0438 \u0438\u0437-\u0437\u0430 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043e\u043d \u0434\u0430\u0451\u0442 \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b.<\/p>\n<p>  <a href=\"https:\/\/codepen.io\/shadeed\/pen\/d703aee137f38c138f2323a0252548ac?editors=1100\">\u0412\u043e\u0442<\/a> \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043a \u044d\u0442\u043e\u043c\u0443 \u0440\u0430\u0437\u0434\u0435\u043b\u0443.<\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/font><\/h3>\n<p>  <\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/ef4\/a8b\/cf6\/ef4a8bcf6f1a6f368a71b1d0283c768a.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u0421\u043b\u0435\u0432\u0430 \u2014 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0435 \u0437\u0430\u0434\u0430\u043d\u043e CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e object-fit. \u0421\u043f\u0440\u0430\u0432\u0430 \u2014 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0437\u0430\u0434\u0430\u043d\u043e<\/font><\/i><\/p>\n<p>  CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>object-fit<\/code> \u0438 <code>object-position<\/code> \u2014 \u044d\u0442\u043e \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c <code>&lt;img&gt;<\/code>. \u041e\u043d\u0438 \u0434\u0430\u044e\u0442 \u043d\u0430\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043d\u0430\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0438 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;img&gt;<\/code>. \u042d\u0442\u043e \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c <code>background<\/code>.<\/p>\n<p>  \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>object-fit<\/code> \u043c\u043e\u0436\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f: <code>fill<\/code>, <code>contain<\/code>, <code>cover<\/code>, <code>none<\/code>, <code>scale-down<\/code>.<\/p>\n<p>  \u0412\u043e\u0442 \u043a\u0430\u043a \u0438\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f:<\/p>\n<pre><code class=\"css\">img { \u00a0\u00a0\u00a0\u00a0object-fit: cover; \u00a0\u00a0\u00a0\u00a0object-position: 50% 50%; } <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c <code>&lt;img&gt;<\/code>, \u043f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435 \u0438 \u043e\u0441\u0432\u0430\u0438\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043c\u0435\u0442\u043e\u0434\u0438\u043a\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438.<\/p>\n<h2><font color=\"#3AC1EF\">\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0437\u0430\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0435 CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c background<\/font><\/h2>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u0434\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>background<\/code>, \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u043b\u043e\u0441\u044c \u0431\u044b \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0441 \u043d\u0435\u043a\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c, \u0438\u043b\u0438 \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0437\u0430\u0434\u0430\u043d\u044b \u0440\u0430\u0437\u043c\u0435\u0440\u044b. \u041e\u0431\u044b\u0447\u043d\u043e \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0444\u0435\u0440\u043e\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b.<\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u041a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c background<\/font><\/h3>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c <code>background<\/code>, \u043d\u0430\u043c \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442:<\/p>\n<pre><code class=\"html\">&lt;div class=&quot;element&quot;&gt;Some content&lt;\/div&gt; <\/code><\/pre>\n<p>  \u041f\u043e\u0442\u043e\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0441\u0442\u0438\u043b\u044c:<\/p>\n<pre><code class=\"css\">.element { \u00a0\u00a0\u00a0\u00a0background: url('cool.jpg'); } <\/code><\/pre>\n<p>  <\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u0417\u0430\u0434\u0430\u043d\u0438\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 background<\/font><\/h3>\n<p>  \u041f\u0440\u0438\u044f\u0442\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0432\u044b\u0432\u043e\u0434\u0438\u043c\u044b\u0445 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>background<\/code>, \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0442\u0430\u043a\u0438\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e. \u042d\u0442\u0438\u043c\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 CSS:<\/p>\n<pre><code class=\"css\">.element { \u00a0\u00a0\u00a0\u00a0background: url('cool-1.jpg'), url('cool-2.jpg'); } <\/code><\/pre>\n<p>  <\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u0421\u043a\u0440\u044b\u0442\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/font><\/h3>\n<p>  \u0421\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 CSS \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f, \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f. \u0415\u0441\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432 CSS \u043d\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u043e \u043a\u0430\u043a \u0432\u0438\u0434\u0438\u043c\u043e\u0435, \u0442\u043e \u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u043e\u043d\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442. \u042d\u0442\u043e \u2014 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>background<\/code> \u043f\u0435\u0440\u0435\u0434 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c <code>&lt;img&gt;<\/code>.<\/p>\n<pre><code class=\"css\">@media (min-width: 700px) { \u00a0\u00a0\u00a0\u00a0.element { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0background: url('cool-1.jpg'); \u00a0\u00a0\u00a0\u00a0} } <\/code><\/pre>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u0444\u043e\u043d\u043e\u0432\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043a\u043e\u0433\u0434\u0430 \u0448\u0438\u0440\u0438\u043d\u0430 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 <code>700px<\/code>.<\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u041e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430<\/font><\/h3>\n<p>  \u0415\u0441\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438, \u0432\u044b\u0432\u043e\u0434\u0438\u043c\u044b\u043c\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>background<\/code>, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0432\u0440\u0435\u0434\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0441\u0442\u0440\u0430\u0434\u0430\u0442\u044c \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0442\u0430\u043a\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0437\u0430\u043a\u043b\u0430\u0434\u043a\u0438 \u0441\u0442\u0430\u0442\u044c\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e \u0432\u0430\u0436\u043d\u0430 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441\u043e \u0441\u0442\u0430\u0442\u044c\u0435\u0439.<\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u0421\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439 background-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043e\u0431\u044b\u0447\u043d\u044b\u043c\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c\u0438<\/font><\/h3>\n<p>  \u041e\u0431\u044b\u0447\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0437\u043d\u0430\u044e\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043d\u0435\u043a\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u2014 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0449\u0451\u043b\u043a\u043d\u0443\u0442\u044c \u043f\u043e \u043d\u0435\u043c\u0443 \u043b\u0435\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u043c\u044b\u0448\u0438 \u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u043e\u0433\u043e \u043c\u0435\u043d\u044e. \u041c\u043e\u0436\u0435\u0442, \u044d\u0442\u043e \u043f\u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0432\u0430\u043c \u0437\u0430\u0431\u0430\u0432\u043d\u044b\u043c, \u043d\u043e \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438, \u0437\u0430\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u043c\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>background<\/code>, \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u0451\u043c \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0422\u0430\u043a\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043e\u0431\u044b\u0447\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c. \u0414\u043b\u044f \u0435\u0433\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0438 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0441\u044b\u043b\u043a\u043e\u0439 \u0438\u0437 <code>url<\/code>.<\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u041f\u0441\u0435\u0432\u0434\u043e-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b<\/font><\/h3>\n<p>  \u041f\u0441\u0435\u0432\u0434\u043e-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438 \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438, \u0437\u0430\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u043c\u0438 CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c <code>background<\/code>. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u2014 \u0434\u043b\u044f \u043f\u043e\u043a\u0430\u0437\u0430 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u0432\u0435\u0440\u0445 \u0434\u0440\u0443\u0433\u043e\u0433\u043e. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c <code>&lt;img&gt;<\/code> \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0441\u0442\u0438\u0447\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e\u0431 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 SVG-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/p>\n<h2><font color=\"#3AC1EF\">SVG-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/font><\/h2>\n<p>  \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u0438\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u043e\u0439 SVG-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0445 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u0438 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430. \u0411\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e, \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;svg&gt;<\/code> \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c, \u043f\u043e\u043c\u0438\u043c\u043e SVG-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0435\u0449\u0451 \u0438 \u0444\u0430\u0439\u043b\u044b \u0444\u043e\u0440\u043c\u0430\u0442\u0430 JPG \u0438 PNG. \u0412\u043e\u0442 HTML-\u043a\u043e\u0434 SVG-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"html\">&lt;svg width=&quot;200&quot; height=&quot;200&quot;&gt; \u00a0\u00a0&lt;image href=&quot;cheesecake.jpg&quot; height=&quot;100%&quot; width=&quot;100%&quot; preserveAspectRatio=&quot;xMidYMid slice&quot; \/&gt; &lt;\/svg&gt; <\/code><\/pre>\n<p>  <\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/408\/f0d\/c14\/408f0dc14f5980b37138ec66b345319b.png\"><\/div>\n<p>  <i><font color=\"#999999\">JPG-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u0432\u044b\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0435 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 SVG<\/font><\/i><\/p>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u043b\u0438 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>preserveAspectRatio<\/code>? \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0435\u043c\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043f\u043e\u043b\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;svg&gt;<\/code>, \u043d\u0435 \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u044f\u0441\u044c \u0438 \u043d\u0435 \u0441\u0436\u0438\u043c\u0430\u044f\u0441\u044c.<\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0448\u0438\u0440\u0438\u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;image&gt;<\/code> \u0431\u043e\u043b\u044c\u0448\u0435, \u043e\u043d\u043e \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 (<code>&lt;svg&gt;<\/code>) \u043f\u043e \u0448\u0438\u0440\u0438\u043d\u0435, \u043d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0442\u044c\u0441\u044f.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/509\/8ee\/2f6\/5098ee2f65dba652cbec750225d27fa5.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u0442\u0441\u044f<\/font><\/i><\/p>\n<p>  \u042d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u0442\u043e, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>object-fit: cover<\/code> \u0438\u043b\u0438 <code>background-size: cover<\/code>.<\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u041e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430<\/font><\/h3>\n<p>  \u0415\u0441\u043b\u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 SVG-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0442\u043e \u043c\u043e\u0433\u0443 \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0439 \u0440\u0430\u0437\u0433\u043e\u0432\u043e\u0440 \u0441\u0440\u0430\u0437\u0443 \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442 \u043c\u043d\u0435 \u043e\u0431 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 <code>&lt;title&gt;<\/code>. \u041d\u0438\u0436\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d \u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u0434\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e, \u0432\u044b\u0432\u043e\u0434\u0438\u043c\u043e\u043c\u0443 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 <code>&lt;svg&gt;<\/code>, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u0442\u0430\u043a\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442:<\/p>\n<pre><code class=\"html\">&lt;svg width=&quot;200&quot; height=&quot;200&quot;&gt; \u00a0\u00a0\u00a0&lt;title&gt;A photo of blueberry Cheescake&lt;\/title&gt; \u00a0\u00a0\u00a0&lt;image href=&quot;cheesecake.jpg&quot; height=&quot;100%&quot; width=&quot;100%&quot; preserveAspectRatio=&quot;xMidYMid slice&quot; \/&gt; &lt;\/svg&gt; <\/code><\/pre>\n<p>  \u0422\u0443\u0442, \u0431\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e, \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c <code>&lt;desc&gt;<\/code>:<\/p>\n<pre><code class=\"html\">&lt;svg width=&quot;200&quot; height=&quot;200&quot;&gt; \u00a0\u00a0\u00a0&lt;title&gt;A photo of blueberry Cheescake&lt;\/title&gt; \u00a0\u00a0\u00a0&lt;desc&gt;A meaningful description about the image&lt;\/desc&gt; \u00a0\u00a0\u00a0&lt;image href=&quot;cheesecake.jpg&quot; height=&quot;100%&quot; width=&quot;100%&quot; preserveAspectRatio=&quot;xMidYMid slice&quot; \/&gt; &lt;\/svg&gt; <\/code><\/pre>\n<p>  <\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u0421\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439 &lt;svg&gt;-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043e\u0431\u044b\u0447\u043d\u044b\u043c\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c\u0438<\/font><\/h3>\n<p>  \u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u0432\u044b\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>&lt;svg&gt;<\/code>, \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c, \u043b\u0438\u0448\u044c \u043f\u0440\u043e\u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0432 \u0435\u0433\u043e \u043a\u043e\u0434 \u0438 \u0434\u043e\u0431\u0440\u0430\u0432\u0448\u0438\u0441\u044c \u0434\u043e \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435. \u042d\u0442\u043e \u043c\u0438\u043d\u0443\u0441, \u043d\u043e\u00a0 \u0432 \u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u043d\u0435\u043a\u0442\u043e \u0445\u043e\u0447\u0435\u0442 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u044d\u0442\u0430 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043c\u043e\u0436\u0435\u0442 \u0438 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f. \u041f\u043e \u043c\u0435\u043d\u044c\u0448\u0435\u0439 \u043c\u0435\u0440\u0435, \u044d\u0442\u043e \u0441\u043d\u0438\u0437\u0438\u0442 \u0448\u0430\u043d\u0441\u044b \u043d\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0442\u0430\u043a\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  \u2192 <a href=\"https:\/\/codepen.io\/shadeed\/pen\/38225ba6b2cd706ca5bff48c131e83ce?editors=1100\">\u0412\u043e\u0442<\/a> \u043f\u0440\u0438\u043c\u0435\u0440 \u043a \u044d\u0442\u043e\u043c\u0443 \u0440\u0430\u0437\u0434\u0435\u043b\u0443<\/p>\n<h2><font color=\"#3AC1EF\">\u0421\u0446\u0435\u043d\u0430\u0440\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0432\u044b\u0432\u043e\u0434\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/font><\/h2>\n<p>  <\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u0420\u0430\u0437\u0434\u0435\u043b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0432\u044b\u0432\u043e\u0434\u0438\u043c\u044b\u0439 \u0432 \u0435\u0451 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438<\/font><\/h3>\n<p>  \u041f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u0443\u044f \u0440\u0430\u0437\u0434\u0435\u043b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0439\u0441\u044f \u0432 \u0435\u0451 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 (\u0442\u0430\u043a\u043e\u0439 \u0440\u0430\u0437\u0434\u0435\u043b \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u00abHero Section\u00bb), \u0438\u043d\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0432 \u043d\u0451\u043c \u0432\u044b\u0432\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0431\u044b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u043f\u043e\u0432\u0435\u0440\u0445 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0438 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0434\u0440\u0443\u0433\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u0412\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0438\u0436\u0435.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/fd4\/40e\/75e\/fd440e75eeefcfa5f51056ffcb072683.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u0412\u0435\u0440\u0445\u043d\u044f\u044f \u0447\u0430\u0441\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u0438 \u043d\u0430\u0434\u043f\u0438\u0441\u044f\u043c\u0438<\/font><\/i><\/p>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0442\u0443\u0442 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0444\u043e\u043d\u043e\u0432\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435. \u041a\u0430\u043a \u0431\u044b \u0432\u044b \u043f\u043e\u0434\u043e\u0448\u043b\u0438 \u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b? \u041d\u043e, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0432\u044b \u043e\u0442\u0432\u0435\u0442\u0438\u0442\u0435 \u043d\u0430 \u044d\u0442\u043e\u0442 \u0432\u043e\u043f\u0440\u043e\u0441, \u043f\u043e\u0437\u0432\u043e\u043b\u044c\u0442\u0435 \u043c\u043d\u0435 \u0441\u0444\u043e\u0440\u043c\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f:<\/p>\n<ul>\n<li>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u043b\u0451\u0433\u043a\u0443\u044e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0441\u043c\u0435\u043d\u0443 \u043f\u0440\u0438 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441 \u0431\u044d\u043a\u0435\u043d\u0434-CMS.<\/li>\n<li>\u041f\u043e\u0432\u0435\u0440\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043d\u0430\u043b\u043e\u0436\u0435\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0443\u043f\u0440\u043e\u0449\u0430\u044e\u0449\u0438\u0439 \u0447\u0442\u0435\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0430.<\/li>\n<li>\u041d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0432\u044b\u0432\u043e\u0434 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u0442\u0440\u0451\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u0445: \u0432 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u043c, \u0441\u0440\u0435\u0434\u043d\u0435\u043c \u0438 \u0431\u043e\u043b\u044c\u0448\u043e\u043c. \u041a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043d\u0438\u0445 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430.<\/li>\n<\/ul>\n<p>  \u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043a \u0440\u0435\u0448\u0435\u043d\u0438\u044e \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438, \u0437\u0430\u0434\u0430\u0434\u0438\u043c\u0441\u044f \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u043c \u043e \u043f\u0440\u0438\u0440\u043e\u0434\u0435 \u0444\u043e\u043d\u043e\u0432\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0442\u0443\u0442 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f. \u0412\u043e\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u043d\u0430\u043c \u0434\u043e\u043a\u043e\u043f\u0430\u0442\u044c\u0441\u044f \u0434\u043e \u0441\u0443\u0442\u0438:<\/p>\n<ol>\n<li>\u0412\u0430\u0436\u043d\u043e \u043b\u0438 \u044d\u0442\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0438\u043b\u0438 \u043e\u043d \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u043e\u0442\u0435\u0440\u044f\u0435\u0442 \u0432 \u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u043e\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0435 \u0432\u0438\u0434\u043d\u043e?<\/li>\n<li>\u041d\u0443\u0436\u043d\u043e \u043b\u0438, \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u044b\u0432\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u044f\u0445 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0432\u0441\u0435\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432?<\/li>\n<li>\u042f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u0438 \u044d\u0442\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c, \u0438\u043b\u0438 \u043e\u043d\u043e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f (\u0438\u0437 CMS, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440)?<\/li>\n<\/ol>\n<p>  \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0430\u0440\u0443 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438.<\/p>\n<h4><font color=\"#333\">\u041f\u0435\u0440\u0432\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438<\/font><\/h4>\n<p>  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>background<\/code> \u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0432 \u043d\u0451\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438, \u043e\u0434\u043d\u043e \u0438\u0437 \u043d\u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u0430 \u0434\u0440\u0443\u0433\u043e\u0435 \u2014 \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0430\u043c\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0412\u0437\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u043d\u0430 \u044d\u0442\u043e\u0442 CSS-\u043a\u043e\u0434:<\/p>\n<pre><code class=\"css\">.hero { \u00a0\u00a0\u00a0\u00a0background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var('landscape.jpg'); \u00a0\u00a0\u00a0\u00a0background-repeat: no-repeat; \u00a0\u00a0\u00a0\u00a0background-size: 100%, cover; } <\/code><\/pre>\n<p>  \u042d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u043e\u0441\u0442\u0438\u0447\u044c \u0436\u0435\u043b\u0430\u0435\u043c\u043e\u0433\u043e, <code>background-image<\/code> \u043c\u043e\u0436\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 JavaScript:<\/p>\n<pre><code class=\"javascript\">&lt;section class=&quot;hero&quot; style=&quot;background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('landscape.jpg');&quot;&gt; \u00a0\u00a0&lt;!-- Hero content --&gt; &lt;\/section&gt; <\/code><\/pre>\n<p>  \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>background<\/code> \u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b \u0432\u043e \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u043e\u043c \u0441\u0442\u0438\u043b\u0435. \u0425\u043e\u0442\u044f \u044d\u0442\u043e \u0438 \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043a\u043e\u0434, \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043e\u043d \u043f\u043b\u043e\u0445\u043e \u0438 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u043f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u043e\u0441\u0442\u044c\u044e.<\/p>\n<p>  \u041c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c, \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0437\u0434\u0435\u0441\u044c CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438?<\/p>\n<pre><code class=\"javascript\">&lt;section class=&quot;hero&quot; style=&quot;--bg-url: url('landscape.jpg')&quot;&gt; \u00a0\u00a0&lt;!-- Hero content --&gt; &lt;\/section&gt; <\/code><\/pre>\n<p>  \u0412\u043e\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u044f.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/c4d\/155\/279\/c4d15527947da05a92564c5c70795927.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u0418\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/font><\/i><\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0444\u043e\u043d\u043e\u0432\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <code>--bg-url<\/code>. \u042d\u0442\u043e \u0432 \u043c\u0438\u043b\u043b\u0438\u043e\u043d \u0440\u0430\u0437 \u043b\u0443\u0447\u0448\u0435, \u0447\u0435\u043c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438.<\/p>\n<h4><font color=\"#333\">\u0410\u043d\u0430\u043b\u0438\u0437<\/font><\/h4>\n<p>  <\/p>\n<ol>\n<li>\u041f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u0437\u0434\u0435\u0441\u044c \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438 \u0445\u043e\u0440\u043e\u0448 \u043b\u0438\u0448\u044c \u0432 \u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0432\u0430\u0436\u043d\u043e.<\/li>\n<li>\u041e\u043d \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0434\u043e\u0439\u0442\u0438 \u0432 \u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043c\u0435\u043d\u044f\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438, \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 CMS, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0439 \u043d\u0430 \u0431\u044d\u043a\u0435\u043d\u0434\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/li>\n<\/ol>\n<p>  \u2192 <a href=\"https:\/\/codepen.io\/shadeed\/pen\/17978a2d824fd51a3b27c2c2d099a522\">\u0412\u043e\u0442<\/a> \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/p>\n<h4><font color=\"#333\">\u0412\u0442\u043e\u0440\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438<\/font><\/h4>\n<p>  \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f HTML-\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 \u0432\u044b\u0432\u043e\u0434\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"html\">&lt;section class=&quot;hero&quot;&gt; \u00a0\u00a0&lt;h2 class=&quot;hero__title&quot;&gt;Using Images in CSS&lt;\/h2&gt; \u00a0\u00a0&lt;p class=&quot;hero__desc&quot;&gt;An article about which and when to use&lt;\/p&gt; \u00a0\u00a0&lt;img src=&quot;landscape.jpg&quot; alt=&quot;&quot;&gt; &lt;\/section&gt; <\/code><\/pre>\n<p>  \u0412 CSS \u043d\u0430\u0434\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u0432 \u0435\u0433\u043e \u043f\u043e\u0434 \u0442\u0435\u043a\u0441\u0442\u043e\u043c. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0442\u0443\u0442 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043f\u0441\u0435\u0432\u0434\u043e-\u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0438\u0433\u0440\u0430\u0442\u044c \u0440\u043e\u043b\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435:<\/p>\n<pre><code class=\"css\">.hero { \u00a0\u00a0\u00a0\u00a0position: relative; }  .hero img { \u00a0\u00a0\u00a0\u00a0position: absolute; \u00a0\u00a0\u00a0\u00a0left: 0; \u00a0\u00a0\u00a0\u00a0top: 0; \u00a0\u00a0\u00a0\u00a0z-index: -1; \u00a0\u00a0\u00a0\u00a0width: 100%; \u00a0\u00a0\u00a0\u00a0height: 100%; \u00a0\u00a0\u00a0\u00a0object-fit: cover; }  .hero:after { \u00a0\u00a0\u00a0\u00a0content: &quot;&quot;; \u00a0\u00a0\u00a0\u00a0position: absolute; \u00a0\u00a0\u00a0\u00a0left: 0; \u00a0\u00a0\u00a0\u00a0top: 0; \u00a0\u00a0\u00a0\u00a0z-index: -1; \u00a0\u00a0\u00a0\u00a0width: 100%; \u00a0\u00a0\u00a0\u00a0height: 100%; \u00a0\u00a0\u00a0\u00a0background: rgba(0, 0, 0, 0.4); } <\/code><\/pre>\n<p>  \u042d\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0445\u043e\u0440\u043e\u0448\u043e \u0442\u0435\u043c, \u0447\u0442\u043e \u043f\u0440\u0438 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043e\u0447\u0435\u043d\u044c \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f <code>src<\/code>. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043e\u043d\u043e \u043b\u0443\u0447\u0448\u0435 \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0441\u043b\u0443\u0447\u0430\u044f, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b\u0432\u043e\u0434\u0438\u043c\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u0430\u0436\u043d\u043e.<\/p>\n<p>  \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043e\u0442\u043c\u0435\u0447\u0443, \u0447\u0442\u043e \u043c\u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0432 <code>&lt;img&gt;<\/code>-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u0445 \u0442\u043e, \u0447\u0442\u043e \u043f\u0440\u0438 \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0437\u0435\u0440\u0432\u043d\u044b\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u044b, \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u0432 \u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u0444\u0430\u0439\u043b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043d\u0435 \u0443\u0434\u0430\u0451\u0442\u0441\u044f. \u0422\u0430\u043a\u043e\u0439 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c, \u0441\u043a\u0430\u0436\u0435\u043c, \u0432\u044b\u0432\u043e\u0434 \u0432\u043c\u0435\u0441\u0442\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u043d\u043e\u0433\u043e \u0444\u043e\u043d\u0430, \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435, \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442:<\/p>\n<pre><code class=\"css\">.hero img { \u00a0\u00a0\u00a0\u00a0\/* \u0414\u0440\u0443\u0433\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 *\/ \u00a0\u00a0\u00a0\u00a0background: #2962ff; \u00a0\u00a0} <\/code><\/pre>\n<p>  <\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/fc5\/776\/400\/fc57764006346ee371de5a637142796d.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u0424\u043e\u043d\u043e\u0432\u044b\u0439 \u0446\u0432\u0435\u0442, \u0432\u044b\u0432\u043e\u0434\u0438\u043c\u044b\u0439 \u0432 \u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043d\u0435 \u0443\u0434\u0430\u0451\u0442\u0441\u044f<\/font><\/i><\/p>\n<p>  \u0417\u0434\u0435\u0441\u044c \u0445\u043e\u0440\u043e\u0448\u043e \u0442\u043e, \u0447\u0442\u043e \u0444\u043e\u043d\u043e\u0432\u044b\u0439 \u0446\u0432\u0435\u0442 \u0432\u044b\u0432\u0435\u0434\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u043d\u0435 \u0443\u0434\u0430\u0441\u0442\u0441\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435. \u042d\u0442\u043e \u043d\u0430\u0441 \u0443\u0441\u0442\u0440\u043e\u0438\u0442.<\/p>\n<p>  \u2192 <a href=\"https:\/\/codepen.io\/shadeed\/pen\/73a2ca78141fcab39d6db9d5bd982728?editors=1100\">\u0412\u043e\u0442<\/a> \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u041b\u043e\u0433\u043e\u0442\u0438\u043f \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0430<\/font><\/h3>\n<p>  \u041b\u043e\u0433\u043e\u0442\u0438\u043f \u2014 \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u043e. \u041b\u043e\u0433\u043e\u0442\u0438\u043f\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u0430\u0439\u0442\u0430\u043c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043b\u043e\u0433\u043e\u0442\u0438\u043f, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0438\u0431\u0435\u0433\u043d\u0443\u0442\u044c \u043a \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c:<\/p>\n<ul>\n<li>\u042d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;img&gt;<\/code>, \u0432\u044b\u0432\u043e\u0434\u044f\u0449\u0438\u0439 PNG, JPG \u0438\u043b\u0438 SVG-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435.<\/li>\n<li>\u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0435 SVG-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435.<\/li>\n<li>\u0424\u043e\u043d\u043e\u0432\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435.<\/li>\n<\/ul>\n<p>  \u041f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0432\u044b\u0432\u043e\u0434\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0441\u0442\u043e\u0438\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432, \u0438 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u043e, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e.<\/p>\n<h4><font color=\"#333\">\u041b\u043e\u0433\u043e\u0442\u0438\u043f \u0441 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e\u043c \u0434\u0435\u0442\u0430\u043b\u0435\u0439<\/font><\/h4>\n<p>  \u0415\u0441\u043b\u0438 \u043b\u043e\u0433\u043e\u0442\u0438\u043f \u0438\u043c\u0435\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0435\u0442\u0430\u043b\u0435\u0439 \u0438\u043b\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043c\u043d\u043e\u0433\u043e \u0444\u0438\u0433\u0443\u0440, \u0432\u044b\u0432\u043e\u0434 \u0435\u0433\u043e \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e SVG-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043d\u0435 \u0442\u0430\u043a\u043e\u0439 \u0443\u0436 \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u0438\u0434\u0435\u0435\u0439. \u0412 \u0442\u0430\u043a\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u0433 <code>&lt;img&gt;<\/code>, \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u0441\u044f PNG, JPG \u0438\u043b\u0438 SVG-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/24e\/bdf\/ea6\/24ebdfea6401d8a05c981461da685b34.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u0420\u0430\u0437\u043d\u044b\u0435 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u044b<\/font><\/i><\/p>\n<p>  \u0412\u043e\u0442 \u043a\u043e\u0434 \u0434\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430, \u0445\u0440\u0430\u043d\u044f\u0449\u0435\u0433\u043e\u0441\u044f \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 SVG:<\/p>\n<pre><code class=\"html\">&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;logo.svg&quot; alt=&quot;Nature Food&quot;&gt;&lt;\/a&gt; <\/code><\/pre>\n<p>  <\/p>\n<h4><font color=\"#333\">\u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u043b\u043e\u0433\u043e\u0442\u0438\u043f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0443\u0436\u043d\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c<\/font><\/h4>\n<p>  <\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/c56\/e15\/6cc\/c56e156cc635f43ffdfb7c6fbfd982e9.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043b\u043e\u0433\u043e\u0442\u0438\u043f<\/font><\/i><\/p>\n<p>  \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e, \u043a\u043e\u0433\u0434\u0430 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043b\u043e\u0433\u043e\u0442\u0438\u043f, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u043d\u0435\u043a\u0443\u044e \u0444\u0438\u0433\u0443\u0440\u0443 \u0438\u043b\u0438 \u0442\u0435\u043a\u0441\u0442. \u041f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043d\u0430 \u043d\u0435\u0433\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f \u043c\u044b\u0448\u0438 \u043d\u0443\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0446\u0432\u0435\u0442 \u0444\u0438\u0433\u0443\u0440\u044b \u0438 \u0442\u0435\u043a\u0441\u0442\u0430. \u041a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c? \u041c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0432 \u044d\u0442\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u043b\u0443\u0447\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u043c SVG-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c:<\/p>\n<pre><code class=\"html\">&lt;a href=&quot;#&quot;&gt; \u00a0\u00a0\u00a0\u00a0&lt;svg class=&quot;logo&quot; width=&quot;115&quot; height=&quot;47&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;g transform=&quot;translate(-5 -5)&quot; fill=&quot;none&quot; fill-rule=&quot;evenodd&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;rect fill=&quot;#D8D8D8&quot; transform=&quot;rotate(45 28.5 28.5)&quot; x=&quot;9&quot; y=&quot;9&quot; width=&quot;39&quot; height=&quot;39&quot; rx=&quot;11&quot; \/&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;text font-family=&quot;Rubik-Medium, Rubik&quot; font-size=&quot;25&quot; font-weight=&quot;400&quot; fill=&quot;#6F6F6F&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;tspan x=&quot;63.923&quot; y=&quot;36.923&quot;&gt;Rect&lt;\/tspan&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/text&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/g&gt; \u00a0\u00a0\u00a0\u00a0&lt;\/svg&gt; &lt;\/a&gt; <\/code><\/pre>\n<p>  \u0412\u043e\u0442 \u0441\u0442\u0438\u043b\u0438:<\/p>\n<pre><code class=\"css\">.logo rect, .logo text { \u00a0\u00a0transition: 0.3s ease-out; }  .logo:hover rect, .logo:hover text { \u00a0\u00a0fill: #4a7def; } <\/code><\/pre>\n<p>  <a href=\"https:\/\/codepen.io\/shadeed\/pen\/4005077cc543647148007f4834c0585c?editors=0100\">\u0412\u043e\u0442<\/a> \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043a \u044d\u0442\u043e\u043c\u0443 \u0440\u0430\u0437\u0434\u0435\u043b\u0443:<\/p>\n<h4><font color=\"#333\">\u041e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u0439 \u043b\u043e\u0433\u043e\u0442\u0438\u043f<\/font><\/h4>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u044f \u043f\u043e\u0434\u0443\u043c\u0430\u043b \u043e\u0431 \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u0445 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430\u0445, \u0442\u043e \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u043b \u043b\u043e\u0433\u043e\u0442\u0438\u043f Smashing Magazine. \u041c\u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0442\u043e, \u043a\u0430\u043a \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440. \u0412\u043e\u0442 \u043c\u0430\u043a\u0435\u0442, \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043b\u043e\u0433\u043e\u0442\u0438\u043f \u0438 \u043b\u043e\u0433\u043e\u0442\u0438\u043f, \u0432\u044b\u0432\u043e\u0434\u0438\u043c\u044b\u0439 \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043e\u0431\u043b\u0430\u0441\u0442\u044f\u0445 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/b11\/281\/11e\/b1128111ea6e79c16e65b3fcfb9bc721.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u041e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u0439 \u043b\u043e\u0433\u043e\u0442\u0438\u043f<\/font><\/i><\/p>\n<p>  \u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u043e\u0439\u0434\u0451\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;picture&gt;<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0434\u0432\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430:<\/p>\n<pre><code class=\"html\">&lt;a class=&quot;logo&quot; href=&quot;\/&quot;&gt; \u00a0\u00a0\u00a0\u00a0&lt;picture&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;source media=&quot;(min-width: 1350px)&quot; srcset=&quot;sm-logo--full.svg&quot;&gt;&lt;img src=&quot;sm-logo.svg&quot; alt=&quot;Smashing Magazine&quot;&gt;&lt;\/picture&gt; \u00a0\u00a0&lt;\/a&gt; <\/code><\/pre>\n<p>  \u0412 CSS \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0443 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u0432 \u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u0448\u0438\u0440\u0438\u043d\u0430 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0432\u043d\u043e\u0439 \u0438\u043b\u0438 \u0431\u043e\u043b\u044c\u0448\u0435\u0439 <code>1350px<\/code>:<\/p>\n<pre><code class=\"css\">.logo { \u00a0\u00a0display: inline-block; \u00a0\u00a0width: 45px; }  @media (min-width: 1350px) { \u00a0\u00a0.logo { \u00a0\u00a0\u00a0\u00a0width: 180px; \u00a0\u00a0} } <\/code><\/pre>\n<p>  \u041f\u0435\u0440\u0435\u0434 \u043d\u0430\u043c\u0438 \u2014 \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u0445 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432.<\/p>\n<p>  \u2192 <a href=\"https:\/\/codepen.io\/shadeed\/pen\/6cf55d4e87b7c443820bd5f8694587a8?editors=1100\">\u0412\u043e\u0442<\/a> \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u043a \u044d\u0442\u043e\u043c\u0443 \u0440\u0430\u0437\u0434\u0435\u043b\u0443<\/p>\n<h4><font color=\"#333\">\u041b\u043e\u0433\u043e\u0442\u0438\u043f \u0441 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u043c<\/font><\/h4>\n<p>  <\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/f2c\/e71\/ed9\/f2ce71ed93c4f1ebd0bcdeb51b4f0840.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u041f\u0440\u0438\u043c\u0435\u0440 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u0441 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u043c<\/font><\/i><\/p>\n<p>  \u0420\u0430\u0431\u043e\u0442\u0430\u044f \u0441 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430\u043c\u0438, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442, \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u044d\u043a\u0441\u043f\u043e\u0440\u0442 \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u0438\u0437 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0434\u0438\u0437\u0430\u0439\u043d\u0430, \u0432\u0440\u043e\u0434\u0435 Adobe Illustrator \u0438\u043b\u0438 Sketch, \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u044c\u0441\u044f \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e. \u0412 \u0445\u043e\u0434\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0447\u0442\u043e-\u0442\u043e \u0432 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0435 \u043c\u043e\u0436\u0435\u0442 \u00ab\u043f\u043e\u043b\u043e\u043c\u0430\u0442\u044c\u0441\u044f\u00bb.<\/p>\n<p>  \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0444\u043e\u0440\u043c\u0430\u0442\u0430 SVG \u043c\u043e\u0436\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043a \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0443 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043d\u044b\u0439 \u0446\u0432\u0435\u0442. \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b <code>&lt;linearGradient&gt;<\/code>, \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0432 \u0441 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0442\u0435\u043a\u0441\u0442\u0430 <code>fill<\/code>:<\/p>\n<pre><code class=\"html\">&lt;svg class=&quot;logo&quot; width=&quot;115&quot; height=&quot;47&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt; \u00a0\u00a0\u00a0\u00a0&lt;defs&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;linearGradient id=&quot;gradient&quot; x1=&quot;0%&quot; y1=&quot;100%&quot; x2=&quot;0%&quot; y2=&quot;0%&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;stop offset=&quot;0%&quot; stop-color=&quot;#4a7def&quot;&gt;&lt;\/stop&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;stop offset=&quot;50%&quot; stop-color=&quot;#ab4787&quot;&gt;&lt;\/stop&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/linearGradient&gt; \u00a0\u00a0\u00a0\u00a0&lt;\/defs&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;g transform=&quot;translate(-5 -5)&quot; fill=&quot;none&quot; fill-rule=&quot;evenodd&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;rect fill=&quot;#AB4787&quot; transform=&quot;rotate(45 28.5 28.5)&quot; x=&quot;9&quot; y=&quot;9&quot; width=&quot;39&quot; height=&quot;39&quot; rx=&quot;11&quot; \/&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;text font-family=&quot;Rubik-Medium, Rubik&quot; font-size=&quot;30&quot; font-weight=&quot;400&quot; fill=&quot;url(#gradient)&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;tspan x=&quot;63.923&quot; y=&quot;36.923&quot;&gt;Rect&lt;\/tspan&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/text&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/g&gt; &lt;\/svg&gt; <\/code><\/pre>\n<p>  \u2192 <a href=\"https:\/\/codepen.io\/shadeed\/pen\/9bf3bee3d08a40411effb5d65f25b5c1?editors=1100\">\u0412\u043e\u0442<\/a> \u043f\u0440\u0438\u043c\u0435\u0440<\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u0410\u0432\u0430\u0442\u0430\u0440 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f<\/font><\/h3>\n<p>  \u0411\u044b\u0432\u0430\u044e\u0442 \u0430\u0432\u0430\u0442\u0430\u0440\u044b \u0441\u0430\u043c\u044b\u0445 \u0440\u0430\u0437\u043d\u044b\u0445 \u0444\u043e\u0440\u043c, \u043d\u043e \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0435 \u0438\u043b\u0438 \u043a\u0440\u0443\u0433\u043b\u044b\u0435 \u0430\u0432\u0430\u0442\u0430\u0440\u044b. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u043d\u0435 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u043e\u0434\u043d\u0438\u043c \u0432\u0430\u0436\u043d\u044b\u043c \u0441\u043e\u0432\u0435\u0442\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b, \u0432\u043f\u043e\u043b\u043d\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0441\u043e\u0447\u0442\u0451\u0442\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c.<\/p>\n<p>  \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u0437\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043c\u0430\u043a\u0435\u0442. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0442\u0430\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u0434\u0432\u0430 \u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u044b\u0445 \u0430\u0432\u0430\u0442\u0430\u0440\u0430 \u0441 \u0447\u0451\u0442\u043a\u0438\u043c\u0438 \u043a\u0440\u0430\u044f\u043c\u0438.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/409\/ddf\/96c\/409ddf96ce069925cccf2f598383393a.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u041f\u0430\u0440\u0430 \u0443\u0434\u0430\u0447\u043d\u044b\u0445 \u0430\u0432\u0430\u0442\u0430\u0440\u043e\u0432<\/font><\/i><\/p>\n<p>  \u0410 \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c, \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0432\u0430\u0442\u0430\u0440\u0430, \u0440\u0435\u0448\u0438\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0441 \u043f\u043e\u0447\u0442\u0438 \u0431\u0435\u043b\u044b\u043c \u0444\u043e\u043d\u043e\u043c? \u0415\u0441\u043b\u0438 \u0442\u0430\u043a \u2014 \u0442\u043e \u0430\u0432\u0430\u0442\u0430\u0440 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0443\u0436\u0435 \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u0442\u0430\u043a \u0445\u043e\u0440\u043e\u0448\u043e.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/a73\/ff5\/89b\/a73ff589ba2bc0c2fe76854e7e465ae9.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u041d\u0435\u0443\u0434\u0430\u0447\u043d\u044b\u0439 \u0430\u0432\u0430\u0442\u0430\u0440<\/font><\/i><\/p>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043d\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u0440\u0438\u0441\u0443\u043d\u043a\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0451\u043d \u0430\u0432\u0430\u0442\u0430\u0440 \u0441 \u043e\u0447\u0435\u043d\u044c \u0441\u0432\u0435\u0442\u043b\u044b\u043c \u0444\u043e\u043d\u043e\u043c. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c \u0442\u043e, \u0447\u0442\u043e \u043e\u043d \u0438\u043c\u0435\u0435\u0442 \u043a\u0440\u0443\u0433\u043b\u0443\u044e \u0444\u043e\u0440\u043c\u0443, \u043a \u043d\u0435\u043c\u0443 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u0440\u0438\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c\u0441\u044f. \u042d\u0442\u043e \u043f\u043b\u043e\u0445\u043e. \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443, \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a \u0430\u0432\u0430\u0442\u0430\u0440\u0443 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u044e\u044e \u0433\u0440\u0430\u043d\u0438\u0446\u0443. \u042d\u0442\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u0430 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c\u043e\u0433\u043e \u0432 \u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043a\u043e\u0433\u0434\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0441\u0432\u0435\u0442\u043b\u044b\u043c.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/129\/402\/85b\/12940285bfb880d57bb99fad6d064d58.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u0421\u043b\u0435\u0432\u0430 \u2014 \u0430\u0432\u0430\u0442\u0430\u0440 \u0441\u043e \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0441\u0432\u0435\u0442\u043b\u044b\u043c \u0444\u043e\u043d\u043e\u043c. \u0421\u043f\u0440\u0430\u0432\u0430 \u2014 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/font><\/i><\/p>\n<p>  \u0420\u0435\u0448\u0438\u0442\u044c \u044d\u0442\u0443 \u0437\u0430\u0434\u0430\u0447\u0443 \u043c\u043e\u0436\u043d\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438:<\/p>\n<ul>\n<li>\u0421 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c <code>&lt;img&gt;<\/code>.<\/li>\n<li>\u0421 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c <code>&lt;img&gt;<\/code> \u0438 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;div&gt;<\/code>.<\/li>\n<li>\u0421 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c <code>&lt;div&gt;<\/code> \u0438 CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>background<\/code>.<\/li>\n<li>\u0421 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c <code>&lt;image&gt;<\/code> \u0432 <code>&lt;svg&gt;<\/code>.<\/li>\n<\/ul>\n<p>  \u0427\u0442\u043e \u0442\u0443\u0442 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u043b\u0443\u0447\u0448\u0435 \u0432\u0441\u0435\u0433\u043e? \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u044b\u044f\u0441\u043d\u0438\u043c.<\/p>\n<h4><font color=\"#333\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 &lt;img&gt;<\/font><\/h4>\n<p>  \u041a\u0430\u043a \u0440\u0435\u0448\u0438\u0442\u044c \u044d\u0442\u0443 \u0437\u0430\u0434\u0430\u0447\u0443? \u041c\u043e\u0436\u0435\u0442 \u2014 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0433\u0440\u0430\u043d\u0438\u0446\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430? \u0418\u0441\u0441\u043b\u0435\u0434\u0443\u0435\u043c \u044d\u0442\u0443 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c (\u0441\u0440\u0430\u0437\u0443 \u0438\u0437\u0432\u0438\u043d\u044f\u044e\u0441\u044c \u0437\u0430 \u0442\u043e, \u0447\u0442\u043e \u043d\u0438\u0436\u0435 \u0432\u044b \u0447\u0430\u0441\u0442\u043e \u0431\u0443\u0434\u0435\u0442\u0435 \u0432\u0438\u0434\u0435\u0442\u044c \u043c\u043e\u044e \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044e).<\/p>\n<p>  \u0412\u043e\u0442 CSS-\u043a\u043e\u0434:<\/p>\n<pre><code class=\"css\">.avatar { \u00a0\u00a0\u00a0\u00a0border: 2px solid #f2f2f2; } <\/code><\/pre>\n<p>  \u0412\u043e\u0442 \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/cd6\/c1d\/f2a\/cd6c1df2a529935b5fb147c6870509ed.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u043d\u0435 \u0442\u0430\u043a\u0438\u043c, \u043a\u0430\u043a \u043e\u0436\u0438\u0434\u0430\u0435\u0442\u0441\u044f: \u0442\u0451\u043c\u043d\u0430\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0430 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u0433\u0440\u0430\u043d\u0438\u0446 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/font><\/i><\/p>\n<p>  \u0422\u043e, \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c, \u043d\u0430\u0441 \u043d\u0435 \u0443\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442. \u041d\u0430\u043c \u043d\u0430\u0434\u043e, \u0447\u0442\u043e\u0431\u044b \u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0431\u044b\u043b\u0430 \u0431\u044b \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u044f\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441 \u0442\u0451\u043c\u043d\u044b\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043d\u0430\u043c \u0442\u0443\u0442 \u043d\u0435 \u043f\u043e\u043c\u043e\u0436\u0435\u0442.<\/p>\n<h4><font color=\"#333\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 &lt;img&gt; \u0438 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 &lt;div&gt;<\/font><\/h4>\n<p>  \u041d\u0430\u043f\u043e\u043c\u043d\u044e, \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u0434 \u043d\u0430\u043c\u0438 \u0441\u0442\u043e\u0438\u0442 \u0437\u0430\u0434\u0430\u0447\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u0442\u0435\u043d\u0438. \u042d\u0442\u0443 \u0437\u0430\u0434\u0430\u0447\u0443 \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0440\u0435\u0448\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u0442\u0435\u043d\u0438 (<code>box-shadow<\/code>) \u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 <code>inset<\/code>, \u0442\u0430\u043a \u043a\u0430\u043a HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b <code>&lt;img&gt;<\/code> \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u044e\u044e \u0442\u0435\u043d\u044c \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442. \u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0430\u0432\u0430\u0442\u0430\u0440 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;div&gt;<\/code> \u0438 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0435\u0449\u0451 \u043e\u0434\u043d\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c, \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u2014 \u0432\u044b\u0432\u043e\u0434 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>  \u0412\u043e\u0442 HTML-\u043a\u043e\u0434:<\/p>\n<pre><code class=\"html\">&lt;div class=&quot;avatar-wrapper&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0&lt;img class=&quot;avatar&quot; src=&quot;shadeed2.jpg&quot; alt=&quot;A photo of Ahmad Shadeed&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=&quot;avatar-border&quot;&gt;&lt;\/div&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  \u0412\u043e\u0442 \u0441\u0442\u0438\u043b\u0438:<\/p>\n<pre><code class=\"css\">.avatar-wrapper { \u00a0\u00a0position: relative; \u00a0\u00a0width: 150px; \u00a0\u00a0height: 150px; }  .avatar-border { \u00a0\u00a0position: absolute; \u00a0\u00a0left: 0; \u00a0\u00a0top: 0; \u00a0\u00a0width: 100%; \u00a0\u00a0height: 100%; \u00a0\u00a0border-radius: 50%; \u00a0\u00a0border: 2px solid rgba(0, 0, 0, 0.1); } <\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;div&gt;<\/code> \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430, \u043e\u043a\u0440\u0430\u0448\u0435\u043d\u043d\u0430\u044f \u0432 10%-\u0439 \u0447\u0451\u0440\u043d\u044b\u0439 \u0446\u0432\u0435\u0442, \u044d\u0442\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442 \u043d\u0430\u043c \u0442\u043e, \u0447\u0442\u043e \u0442\u0430\u043a\u0430\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u0430 \u0442\u0451\u043c\u043d\u043e\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435 \u0432\u0438\u0434\u043d\u0430, \u0430 \u043d\u0430 \u0441\u0432\u0435\u0442\u043b\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043c\u0435\u0442\u043d\u0430, \u0432\u044b\u0434\u0435\u043b\u044f\u044f \u0435\u0433\u043e \u0433\u0440\u0430\u043d\u0438\u0446\u0443. \u0412\u043e\u0442 \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/af0\/2e4\/15e\/af02e415e6a5fce9907ac9c562124b86.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u0412\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u044f\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430, \u0432\u0438\u0434\u0438\u043c\u0430\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0441\u0432\u0435\u0442\u043b\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u0445<\/font><\/i><\/p>\n<p>  \u2192 <a href=\"https:\/\/codepen.io\/shadeed\/pen\/da23d9a18dac14692a97e1bc6e86a5ff?editors=1100\">\u0412\u043e\u0442<\/a> \u043f\u0440\u0438\u043c\u0435\u0440 \u043a \u044d\u0442\u043e\u043c\u0443 \u0440\u0430\u0437\u0434\u0435\u043b\u0443<\/p>\n<h4><font color=\"#333\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 &lt;div&gt; \u0438 CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 background<\/font><\/h4>\n<p>  \u0415\u0441\u043b\u0438 \u0431\u044b \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0434\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u0430\u0432\u0430\u0442\u0430\u0440\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;div&gt;<\/code>, \u0442\u043e \u044d\u0442\u043e, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0437\u043d\u0430\u0447\u0438\u043b\u043e \u0431\u044b, \u0447\u0442\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438\u0433\u0440\u0430\u0435\u0442 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u0443\u044e \u0440\u043e\u043b\u044c. \u041c\u043d\u0435 \u0442\u0443\u0442 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0432 \u0433\u043e\u043b\u043e\u0432\u0443 \u043e\u0434\u0438\u043d \u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 \u043d\u0438\u0436\u0435. \u0417\u0434\u0435\u0441\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0430\u0432\u0430\u0442\u0430\u0440\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0430\u0437\u0431\u0440\u043e\u0441\u0430\u043d\u044b \u043f\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/e9f\/b15\/ff8\/e9fb15ff86100fcabc59ba2834efe5dd.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u0410\u0432\u0430\u0442\u0430\u0440\u044b, \u0440\u0430\u0437\u0431\u0440\u043e\u0441\u0430\u043d\u043d\u044b\u0435 \u043f\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435<\/font><\/i><\/p>\n<p>  HTML-\u043a\u043e\u0434 \u0437\u0434\u0435\u0441\u044c \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u0438\u043c:<\/p>\n<pre><code class=\"html\">&lt;div class=&quot;avatar&quot; style=&quot;--img-url: url(shadeed2.jpg)&quot;&gt;&lt;\/div&gt; <\/code><\/pre>\n<p>  \u0412\u043e\u0442 \u0441\u0442\u0438\u043b\u044c:<\/p>\n<pre><code class=\"css\">.avatar { \u00a0\u00a0background: var(--img-url) center\/cover; \u00a0\u00a0width: 150px; \u00a0\u00a0height: 150px; \u00a0\u00a0border-radius: 50%; \u00a0\u00a0box-shadow: inset 0 0 0 2px rgba(#000, 0.1); } <\/code><\/pre>\n<p>  <a href=\"https:\/\/codepen.io\/shadeed\/pen\/39eb9dac364ec15b9ab9bae7fe3a7148?editors=0100\">\u0417\u0434\u0435\u0441\u044c<\/a> \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440.<\/p>\n<h4><font color=\"#333\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 &lt;image&gt; \u0432 &lt;svg&gt;<\/font><\/h4>\n<p>  \u042f \u043f\u043e\u043b\u0430\u0433\u0430\u044e, \u0447\u0442\u043e \u044d\u0442\u043e \u2014 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0430\u0448\u0435\u0439 \u0437\u0430\u0434\u0430\u0447\u0438. \u042f \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u0451\u043c, <a href=\"https:\/\/habr.com\/ru\/company\/ruvds\/blog\/496958\/\">\u0438\u0437\u0443\u0447\u0430\u044f \u043d\u043e\u0432\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d<\/a> Facebook.<\/p>\n<p>  \u0412\u043e\u0442 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430:<\/p>\n<pre><code class=\"html\">&lt;svg role=&quot;none&quot; style=&quot;height: 36px; width: 36px;&quot;&gt; \u00a0\u00a0&lt;mask id=&quot;avatar&quot;&gt; \u00a0\u00a0\u00a0\u00a0&lt;circle cx=&quot;18&quot; cy=&quot;18&quot; fill=&quot;white&quot; r=&quot;18&quot;&gt;&lt;\/circle&gt; \u00a0\u00a0&lt;\/mask&gt; \u00a0\u00a0&lt;g mask=&quot;url(#avatar)&quot;&gt; \u00a0\u00a0\u00a0\u00a0&lt;image x=&quot;0&quot; y=&quot;0&quot; height=&quot;100%&quot; preserveAspectRatio=&quot;xMidYMid slice&quot; width=&quot;100%&quot; xlink:href=&quot;avatar.jpg&quot; style=&quot;height: 36px; width: 36px;&quot;&gt;&lt;\/image&gt; \u00a0\u00a0\u00a0\u00a0&lt;circle cx=&quot;18&quot; cy=&quot;18&quot; r=&quot;18&quot;&gt;&lt;\/circle&gt; \u00a0\u00a0&lt;\/g&gt; &lt;\/svg&gt; <\/code><\/pre>\n<p>  \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u044d\u0442\u043e\u0442 \u043a\u043e\u0434. \u0412\u043e\u0442 \u0447\u0442\u043e \u0442\u0443\u0442 \u0435\u0441\u0442\u044c:<\/p>\n<ol>\n<li>\u041c\u0430\u0441\u043a\u0430, \u043e\u0431\u0440\u0435\u0437\u0430\u044e\u0449\u0430\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432 \u0432\u0438\u0434\u0435 \u043a\u0440\u0443\u0433\u0430.<\/li>\n<li>\u0413\u0440\u0443\u043f\u043f\u0430, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043c\u0430\u0441\u043a\u0430.<\/li>\n<li>\u0421\u0430\u043c\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c <code>preserveAspectRatio=\u00abxMidYMid\u00bb<\/code>.<\/li>\n<li>\u041a\u0440\u0443\u0433, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0440\u043e\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u044b.<\/li>\n<\/ol>\n<p>  \u0412\u043e\u0442 \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f:<\/p>\n<pre><code class=\"css\">circle { \u00a0\u00a0stroke-width: 2; \u00a0\u00a0stroke: rgba(0, 0, 0, 0.1); \u00a0\u00a0fill: none; } <\/code><\/pre>\n<p>  \u2192 <a href=\"https:\/\/codepen.io\/shadeed\/pen\/b17d34b5c23cc90fdc4573779544c8c7?editors=0100\">\u0417\u0434\u0435\u0441\u044c<\/a> \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043f\u0440\u0438\u043c\u0435\u0440<\/p>\n<p>  \u0421 \u0430\u0432\u0430\u0442\u0430\u0440\u0430\u043c\u0438 \u043c\u044b \u043d\u0430 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0434\u0451\u043c \u0434\u0430\u043b\u044c\u0448\u0435.<\/p>\n<h3><font color=\"#3AC1EF\">\u258d\u041f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u0441 \u0438\u043a\u043e\u043d\u043a\u043e\u0439<\/font><\/h3>\n<p>  \u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0441 \u0438\u043a\u043e\u043d\u043a\u043e\u0439.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/6e0\/3be\/48e\/6e03be48e709d0af0d7cd9c968e2c932.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u041f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u0441 \u0438\u043a\u043e\u043d\u043a\u043e\u0439<\/font><\/i><\/p>\n<p>  \u0422\u0430\u043a\u0438\u0435 \u043f\u043e\u043b\u044f \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e\u0442\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0447\u0430\u0441\u0442\u043e. \u041a\u0430\u043a \u043e\u0441\u043d\u0430\u0441\u0442\u0438\u0442\u044c \u043f\u043e\u043b\u0435 \u0438\u043a\u043e\u043d\u043a\u043e\u0439? \u0427\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0438 \u0442\u0430\u043a\u0438\u043c \u043f\u043e\u043b\u0435\u043c \u0444\u043e\u043a\u0443\u0441\u0430? \u0418\u0441\u0441\u043b\u0435\u0434\u0443\u0435\u043c \u044d\u0442\u0438 \u0432\u043e\u043f\u0440\u043e\u0441\u044b.<\/p>\n<p>  \u0412\u043e\u0442 HTML-\u043a\u043e\u0434:<\/p>\n<pre><code class=\"html\">&lt;p&gt; \u00a0\u00a0\u00a0\u00a0&lt;label for=&quot;name&quot;&gt;Full name&lt;\/label&gt; \u00a0\u00a0\u00a0\u00a0&lt;input type=&quot;text&quot; id=&quot;name&quot;&gt; &lt;\/p&gt; <\/code><\/pre>\n<p>  \u042f \u043f\u043e\u043b\u0430\u0433\u0430\u044e, \u0447\u0442\u043e \u043b\u0443\u0447\u0448\u0435\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0444\u043e\u043d\u043e\u0432\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0437\u0430\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0445 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 CSS. \u042d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e, \u0431\u044b\u0441\u0442\u0440\u043e \u0438 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043f\u0440\u0438\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432:<\/p>\n<pre><code class=\"css\">input { \u00a0\u00a0\u00a0\u00a0background-color: #fff; \u00a0\u00a0\u00a0\u00a0background-image: url('user.svg'); \u00a0\u00a0\u00a0\u00a0background-size: 20px 20px; \u00a0\u00a0\u00a0\u00a0background-position: left 10px center; \u00a0\u00a0\u00a0\u00a0background-repeat: no-repeat; } <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u0430 \u0438\u043a\u043e\u043d\u043a\u0438 \u043f\u0440\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0438 \u043f\u043e\u043b\u0435\u043c \u0444\u043e\u043a\u0443\u0441\u0430 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c URL-\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 SVG-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435. \u0421\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043b\u0435\u0433\u043a\u043e. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d <a href=\"https:\/\/yoksel.github.io\/url-encoder\/\">\u0434\u0430\u043d\u043d\u044b\u0439<\/a> \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u0439 Yoksel.<\/p>\n<p>  <a href=\"https:\/\/codepen.io\/shadeed\/pen\/81f64125425dba02f7a0b725fa837381?editors=0110\">\u0412\u043e\u0442<\/a> \u043f\u0440\u0438\u043c\u0435\u0440.<\/p>\n<h3><font color=\"#3AC1EF\">\u258dCSS-\u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043f\u0435\u0447\u0430\u0442\u0438<\/font><\/h3>\n<p>  \u041f\u043e\u0441\u0435\u0442\u0438\u0442\u0435\u043b\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0440\u0430\u0441\u043f\u0435\u0447\u0430\u0442\u0430\u0442\u044c \u0435\u0451 \u043d\u0430 \u043f\u0440\u0438\u043d\u0442\u0435\u0440\u0435. \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043a\u0443\u043b\u0438\u043d\u0430\u0440\u043d\u044b\u0439 \u0440\u0435\u0446\u0435\u043f\u0442, \u0438 \u0435\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0441\u043f\u0435\u0447\u0430\u0442\u0430\u0442\u044c, \u0441\u0434\u0435\u043b\u0430\u0432 \u044d\u0442\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0430 \u043a\u0443\u0445\u043d\u0435 \u043d\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0431\u044b \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0437\u0430\u0433\u043b\u044f\u0434\u044b\u0432\u0430\u0442\u044c \u0432 \u0442\u0435\u043b\u0435\u0444\u043e\u043d \u0438\u043b\u0438 \u0432 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440.<\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0432 \u0440\u0435\u0446\u0435\u043f\u0442\u0435 \u0435\u0441\u0442\u044c \u0448\u0430\u0433\u0438, \u043f\u0440\u043e\u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438, \u0432\u0430\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u043f\u043e\u043f\u0430\u043b\u0438 \u0431\u044b \u0432 \u0435\u0433\u043e \u043f\u0435\u0447\u0430\u0442\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e, \u0438\u043d\u0430\u0447\u0435 \u0442\u043e\u0442, \u043a\u0442\u043e \u0432\u044b\u0432\u0435\u0434\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043d\u0430 \u043f\u0435\u0447\u0430\u0442\u044c, \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0440\u0435\u0446\u0435\u043f\u0442\u043e\u043c.<\/p>\n<h4><font color=\"#333\">\u041f\u043e\u0441\u0442\u0430\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u043d\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u043f\u0435\u0447\u0430\u0442\u0438, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0432\u044b\u0432\u043e\u0434\u0438\u043c\u044b\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 background<\/font><\/h4>\n<p>  \u0415\u0441\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u043e\u0441\u0442\u0430\u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>background<\/code>, \u0442\u043e\u0433\u0434\u0430 \u043d\u0430 \u043f\u0435\u0447\u0430\u0442\u044c \u043e\u043d\u043e \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043d\u0435 \u0431\u0443\u0434\u0435\u0442. \u0422\u043e \u043c\u0435\u0441\u0442\u043e, \u0433\u0434\u0435 \u043e\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b\u043e\u0441\u044c, \u043f\u0440\u0438 \u043f\u0435\u0447\u0430\u0442\u0438 \u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043f\u0443\u0441\u0442\u044b\u043c. \u0412\u043e\u0442 \u043e \u0447\u0451\u043c \u044f \u0433\u043e\u0432\u043e\u0440\u044e.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/183\/d67\/a97\/183d67a97db3b834dd319601062c7582.png\"><\/div>\n<p>  <i><font color=\"#999999\">\u041f\u0443\u0441\u0442\u044b\u0435 \u043c\u0435\u0441\u0442\u0430 \u0432\u043c\u0435\u0441\u0442\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0432\u043a\u043b\u044e\u0447\u0451\u043d\u043d\u044b\u0445 \u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 background<\/font><\/i><\/p>\n<p>  \u041e\u0442 \u0442\u0430\u043a\u043e\u0439 \u043f\u0435\u0447\u0430\u0442\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0440\u0435\u0446\u0435\u043f\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u043c\u0430\u043b\u043e \u043f\u043e\u043b\u044c\u0437\u044b. \u0418\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e, \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u043f\u0435\u0447\u0430\u0442\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041d\u043e \u044d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 Firefox \u0438 \u0432 IE. \u0412\u043e\u0442 \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432 CSS:<\/p>\n<pre><code class=\"css\">.element { \u00a0\u00a0\u00a0\u00a0background: url('cheesecake.png') center\/cover no-repeat; \u00a0\u00a0\u00a0\u00a0-webkit-print-color-adjust: exact; \/* \u041f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0432\u044b\u0432\u043e\u0434 \u0444\u043e\u043d\u043e\u0432\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u043f\u0435\u0447\u0430\u0442\u0438 *\/ } <\/code><\/pre>\n<p>  \u0412 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f\u0445 \u043b\u0443\u0447\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c <code>&lt;img&gt;<\/code>. \u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0432\u043a\u043b\u044e\u0447\u0451\u043d\u043d\u044b\u0435 \u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0432\u044b\u0432\u043e\u0434\u044f\u0442\u0441\u044f \u043d\u0430 \u043f\u0435\u0447\u0430\u0442\u044c \u0431\u0435\u0437 \u043f\u0440\u043e\u0431\u043b\u0435\u043c.<\/p>\n<p>  \u2192 <a href=\"https:\/\/codepen.io\/shadeed\/pen\/97d7b13765718132a4fe71b6bc43e388?editors=0100\">\u0412\u043e\u0442<\/a> \u043f\u0440\u0438\u043c\u0435\u0440<\/p>\n<h2><font color=\"#3AC1EF\">\u0418\u0442\u043e\u0433\u0438<\/font><\/h2>\n<p>  \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438 \u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u0445 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 \u0441\u043e\u0441\u0442\u0430\u0432 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u043e\u0431\u0441\u0443\u0434\u0438\u043b\u0438 \u0438\u0445 \u043f\u043b\u044e\u0441\u044b \u0438 \u043c\u0438\u043d\u0443\u0441\u044b, \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438 \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f. \u041d\u0430\u0434\u0435\u0435\u043c\u0441\u044f, \u0432\u0430\u043c \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u0442\u043e, \u043e \u0447\u0451\u043c \u0432\u044b \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u0443\u0437\u043d\u0430\u043b\u0438.<\/p>\n<p>  <b>\u0423\u0432\u0430\u0436\u0430\u0435\u043c\u044b\u0435 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u0438!<\/b> \u0421\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u043b\u0438\u0441\u044c \u043b\u0438 \u0432\u044b \u0441 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c\u0438 \u043f\u0440\u0438 \u0432\u044b\u0432\u043e\u0434\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445?<\/p>\n<p>  <a href=\"https:\/\/ruvds.com\/ru-rub\/#order\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/iq\/fi\/b4\/iqfib45pgphfrxv--zfemt0qnmw.jpeg\"><\/a><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/company\/ruvds\/blog\/497876\/\"> https:\/\/habr.com\/ru\/company\/ruvds\/blog\/497876\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/company\/ruvds\/blog\/497876\/\">\u041e\u0434\u043d\u043e \u0438\u0437 \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0441\u0430\u0439\u0442\u0430, \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0432\u044b\u0431\u043e\u0440\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 \u0441\u043e\u0441\u0442\u0430\u0432 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446. \u042d\u0442\u043e\u0442 \u0441\u043f\u043e\u0441\u043e\u0431 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 HTML-\u0442\u0435\u0433\u0430 <code>&lt;img&gt;<\/code>. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>background<\/code> \u0438\u043b\u0438 \u0442\u0435\u0433\u0430 <code>&lt;image&gt;<\/code> \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;svg&gt;<\/code>. \u0412\u044b\u0431\u043e\u0440 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u043a \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u0432\u0435\u0441\u044c\u043c\u0430 \u0432\u0430\u0436\u0435\u043d, \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u0441\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<p>  <a href=\"https:\/\/habr.com\/ru\/company\/ruvds\/blog\/497876\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/_t\/31\/qj\/_t31qjds7ipvwbz86ednq8q8skk.jpeg\"><\/a><\/p>\n<p>  \u041c\u0430\u0442\u0435\u0440\u0438\u0430\u043b, \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u043f\u0443\u0431\u043b\u0438\u043a\u0443\u0435\u043c, \u043f\u043e\u0441\u0432\u044f\u0449\u0451\u043d \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 \u0441\u043e\u0441\u0442\u0430\u0432 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446. \u0417\u0434\u0435\u0441\u044c \u0431\u0443\u0434\u0443\u0442 \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u044b \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 \u044d\u0442\u0438\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0442\u043e\u043c, \u043a\u043e\u0433\u0434\u0430 \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u0438\u0445 \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-302114","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/302114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=302114"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/302114\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=302114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=302114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=302114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}