{"id":210,"date":"2023-10-01T17:53:36","date_gmt":"2023-10-01T15:53:36","guid":{"rendered":"https:\/\/gdm.sosthe.sk\/?page_id=210"},"modified":"2023-10-01T17:53:36","modified_gmt":"2023-10-01T15:53:36","slug":"pozadie","status":"publish","type":"page","link":"https:\/\/gdm.sosthe.sk\/?page_id=210","title":{"rendered":"Pozadie"},"content":{"rendered":"<h2><span style=\"font-size: 16px;\">Zdru\u017een\u00e1 defin\u00edcia pozadia \u2013 background<\/span><\/h2>\n<div id=\"node-226\" class=\"node\">\n<div class=\"content clear-block clear-both \">\n<p><span>Umo\u017e\u0148uje skr\u00e1ten\u00fd z\u00e1pis v\u0161etk\u00fdch vlastnost\u00ed pozadia:<\/span><\/p>\n<ul>\n<li><span>background-color<\/span><\/li>\n<li><span>background-image<\/span><\/li>\n<li><span>background-position<\/span><\/li>\n<li><span>background-repeat<\/span><\/li>\n<li><span>background-attachement<\/span><\/li>\n<li><span>background-size<\/span><\/li>\n<\/ul>\n<pre><span style=\"color: #0000ff;\">body {background: #cf3 url(..\/images\/pozadi.jpg) top left repeat-x;}\r\n<\/span><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/tomas.dankovi.info\/system\/files\/images\/smileys\/lightbulb.gif\" alt=\"\" \/><span>Pri pou\u017eit\u00ed zdru\u017eenej defin\u00edcie s\u00fa pri neuveden\u00fdch vlastnostiach nastaven\u00e9 v\u00fdchodiskov\u00e9 hodnoty.<\/span><\/p>\n<h3><span>Farba pozadia \u2013 background-color<\/span><\/h3>\n<pre><span style=\"color: #0000ff;\">p {background-color: #cf3;}\r\n#header p {background-color: transparent;}\r\n<\/span><\/pre>\n<h3><span>Obr\u00e1zok na pozad\u00ed \u2013 background-image<\/span><\/h3>\n<pre><span style=\"color: #0000ff;\">body {background-image: url(..\/images\/pozadi.jpg);}\r\n.zadny-obraziek {background-image: none;}<\/span><\/pre>\n<h3><span>Poz\u00edcia obr\u00e1zku na pozad\u00ed \u2013 background-position<\/span><\/h3>\n<pre><span style=\"color: #0000ff;\">body {\r\n  background: url(..\/images\/pozadi.jpg) no-repeat;\r\n  background-position: centrum bottom; \/* os <strong>x<\/strong> a os <strong>y<\/strong> *\/\r\n}<\/span><\/pre>\n<p><span>Ekvivalentn\u00e9 z\u00e1pisy:<\/span><\/p>\n<ul>\n<li><span>left top ~ 0% 0% ~ 0 0<\/span><\/li>\n<li><span>right bottom ~ 100% 100%<\/span><\/li>\n<\/ul>\n<p><span>Ak uvediete iba jednu hodnotu, druh\u00e1 sa automaticky nastav\u00ed na stred:<\/span><\/p>\n<ul>\n<li><span>0 ~ left ~ left centier ~ 50% 50%<\/span><\/li>\n<li><span>50% ~ centier ~ centier centier ~ 50% 50%<\/span><\/li>\n<li><span>100% ~ right ~ right centier ~ 100% 50%<\/span><\/li>\n<li><span>top ~ centier top ~ 50% 0% ~ 50% 0<\/span><\/li>\n<li><span>bottom ~ center bottom ~ 50% 100%<\/span><\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/tomas.dankovi.info\/system\/files\/images\/smileys\/lightbulb.gif\" alt=\"\" \/><span>V jednej deklar\u00e1cii nepou\u017e\u00edvajte s\u00fa\u010dasne textov\u00e9 a \u010d\u00edseln\u00e9 hodnoty.<\/span><\/p>\n<h3><span>Opakovanie obr\u00e1zku na pozad\u00ed \u2013 background-repeat<\/span><\/h3>\n<pre><span style=\"color: #0000ff;\">body {\r\n  background-image: url(..\/images\/pozadi.jpg);\r\n  background-repeat: repeat-x; \/* repeat-y, no-repeat, repeat *\/\r\n}<\/span><\/pre>\n<h3><span>Pos\u00favanie obr\u00e1zku na pozad\u00ed \u2013 background-attachment<\/span><\/h3>\n<pre><span style=\"color: #0000ff;\">body {\r\n  background-image: url(..\/images\/pozadi.jpg);\r\n  background-attachment: fixed;\r\n}\r\n<\/span><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/tomas.dankovi.info\/system\/files\/images\/smileys\/angry_smile.gif\" alt=\"\" \/>\u00a0<span class=\"abbr\" title=\"Internet Explorer 6 a ni\u017e\u0161ia verzia\"><span>IE6-<\/span><\/span><span>\u00a0umo\u017e\u0148uje pou\u017ei\u0165 hodnotu\u00a0<\/span><strong><span>fixed<\/span><\/strong><span>\u00a0iba pre element\u00a0<\/span><strong><span>body<\/span><\/strong><span>\u00a0.<\/span><\/p>\n<h3><span>Ve\u013ekos\u0165 pozadia na pozad\u00ed \u2013 background-size<\/span><\/h3>\n<pre><span style=\"color: #0000ff;\">body {\r\n  background-image: url(..\/images\/pozadi.jpg);\r\n  background-size: <strong>cover<\/strong> ;\r\n}<\/span><\/pre>\n<h3><span>Prieh\u013eadnos\u0165 \u2013 opacity<\/span><\/h3>\n<p><span>Vlastnos\u0165 prieh\u013eadnosti nastaven\u00e1 na 30% je definovan\u00e1 pre IE, FireFox a ostatn\u00e9 modern\u00e9 prehliada\u010de (\u010dierna farba pozadia je nepovinn\u00e1).<\/span><\/p>\n<pre><span style=\"color: #0000ff;\">img {\r\n  background-color: black;\r\n  -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity= <strong>30<\/strong> )\"; \/* IE8+ *\/\r\n  filter: alfa(opacity = <strong>30<\/strong> ); \/* IE5+ (order 1. \"-ms-filter\", 2. \"filter\" pracuj\u00faci v IE8\u2032s emulating IE7 mode too) *\/\r\n  opacity: <strong>0.3<\/strong> ;\r\n}<\/span><\/pre>\n<h3><span>Prechody \u2013 gradienty<\/span><\/h3>\n<p><span>Dokument\u00e1cia pozri\u00a0<\/span><a class=\"ext\" href=\"http:\/\/dev.w3.org\/csswg\/css-images-3\/#gradients\" target=\"_blank\" rel=\"nofollow noopener\"><span>W3C gradients<\/span><\/a><span>.<\/span><\/p>\n<p><a class=\"ext\" href=\"http:\/\/www.colorzilla.com\/gradient-editor\/\" target=\"_blank\" rel=\"nofollow noopener\"><span>Gener\u00e1tory gradientov <\/span><\/a><span>v\u00e1m m\u00f4\u017eu u\u0161etri\u0165 ve\u013ea \u010dasu (podpora prehliada\u010dov).\u00a0Niektor\u00e9 gener\u00e1tory umo\u017e\u0148uj\u00fa napr. aj prev\u00e1dza\u0165 obr\u00e1zky gradientov na CSS.\u00a0<\/span><img loading=\"lazy\" decoding=\"async\" title=\"enlightened\" src=\"http:\/\/tomas.dankovi.info\/sites\/all\/libraries\/ckeditor\/plugins\/smiley\/images\/lightbulb.gif\" alt=\"enlightened\" width=\"20\" height=\"20\" \/><\/p>\n<h4><span>Line\u00e1rny prechod \u2013 linear gradient<\/span><\/h4>\n<p><span>Podpora: FF3.6+, Chrome, Safari4+, Opera11.1<\/span><\/p>\n<ul>\n<li><span>horizont\u00e1lny alebo vertik\u00e1lny prechod dvoch farieb:\u00a0<\/span><strong><span>IE6+<\/span><\/strong><\/li>\n<li><span>prechod dvoch farieb s \u013eubovo\u013en\u00fdm uhlom:\u00a0<\/span><strong><span>IE9+<\/span><\/strong><\/li>\n<li><span>prechod troch a viacer\u00fdch farieb s \u013eubovo\u013en\u00fdm uhlom:\u00a0<\/span><strong><span>IE10+<\/span><\/strong><\/li>\n<\/ul>\n<p><span>Pr\u00edklad vertik\u00e1lneho prechodu dvoch farieb:<\/span><\/p>\n<pre><span style=\"color: #0000ff;\">.gradient {\r\n  background-color: #bada55; \/* <strong>background color if gradients nie s\u00fa podporovan\u00e9<\/strong> *\/\r\n  background-image: -moz-line\u00e1r-gradient(top, #bada55 0%, #2a562c 100%); \/* <strong>FF(3.6 to 15)<\/strong> *\/\r\n  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bada55), color-stop(100%,#2a562c)); \/* <strong>Chrome, Safari4+<\/strong> *\/\r\n  background-image: -webkit-line\u00e1r-gradient(top, #bada55 0%, #2a562c 100%); \/* <strong>Chrome10+ a Safari5.1+<\/strong> *\/\r\n  background-image: -o-line\u00e1r-gradient(top, #bada55 0%, #2a562c 100%); \/* <strong>Opera(11.1 to 12.0)<\/strong> *\/\r\n  background-image: -ms-line\u00e1r-gradient(top, #bada55 0%, #2a562c 100%); \/* <strong>pre-releases of IE10<\/strong> *\/\r\n  background-image: linear-gradient(to bottom, #bada55 0%, #2a562c 100%); \/* <strong>W3C \u0161tandard, IE10+<\/strong> *\/\r\n  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bada55', endColorstr='#2a562c',GradientType=0); \/* <strong>IE(6 a\u017e 9)<\/strong> *\/\r\n}<\/span><\/pre>\n<p><span>Pr\u00edklad prechodu dvoch farieb v uhle 135\u00b0:<\/span><\/p>\n<ul>\n<li><span>Pre \u00fapln\u00fa podporu multi-stop (viac farieb) gradientu v IE9 (pomocou SVG) je nutn\u00e9 pomocou podmienen\u00e9ho koment\u00e1ra \u201ezak\u00e1za\u0165\u201c filter.<\/span><\/li>\n<\/ul>\n<pre><span style=\"color: #0000ff;\">&lt;!--[if gte IE 9]&gt;\r\n  &lt;style type=\"text\/css\"&gt;\r\n    .gradient {\r\n       filter: none;\r\n    }\r\n  &lt;\/style&gt;\r\n&lt;![endif]--&gt;<\/span><\/pre>\n<pre><span style=\"color: #0000ff;\">.gradient {\r\n  background-color: #1e5799; \/* <strong>background color if gradients nie s\u00fa podporovan\u00e9<\/strong> *\/\r\n\/* <strong>IE9 SVG, potrebuj\u00fa kondi\u010dn\u00fd override of 'filter' to 'none'<\/strong> *\/\r\n  background-image: url(data:image\/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA\/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2 0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2ct PSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZQQ9IjAlIiBzdG9wLWNvbG9 dHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcm wIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);\r\n  background-image: -moz-linear-gradient(-45deg, #1e5799 0%, #7db9e8 100%); \/* <strong>FF(3.6 to 15)<\/strong> *\/\r\n  background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #1e5799), color-stop(100%, #7db9e8)); \/* <strong>Chrome, Safari4+<\/strong> *\/\r\n  background-image: -webkit-linear-gradient(-45deg, #1e5799 0%, #7db9e8 100%); \/* <strong>Chrome10+,Safari5.1+<\/strong> *\/\r\n  background-image: -o-line\u00e1r-gradient(-45deg, #1e5799 0%, #7db9e8 100%); \/* <strong>Opera(11.1 to 12.0)<\/strong> *\/\r\n  background-image: -ms-line\u00e1r-gradient(-45deg, #1e5799 0%, #7db9e8 100%); \/* <strong>pre-releases of IE10<\/strong> *\/\r\n  background-image: linear-gradient( <strong>135deg<\/strong> , #1e5799 0%, #7db9e8 100%); \/* <strong>W3C \u0161tandard, IE10+<\/strong> *\/\r\n  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=1); \/* <strong>IE(6 a\u017e 8) fallback on horizontal gradient ONLY<\/strong> *\/\r\n}<\/span><\/pre>\n<h3><span>Filtre &#8211; filter<\/span><\/h3>\n<p><span>Pr\u00edklad odfarbenia obr\u00e1zku na pozad\u00ed:<\/span><\/p>\n<pre><span style=\"color: #0000ff;\">.gray {\r\n  background: url('..\/images\/pozadi.jpg') no-repeat 0 0;\r\n  <strong>-webkit-filter: grayscale(1); <\/strong>\/* Webkit Nightlies &amp; Chrome Canary *\/\r\n   <strong>filter: gray; <\/strong>\/* IE5+ *\/\r\n   <strong>filter: grayscale(100%);<\/strong>\r\n  -webkit-transition: all .5s ease-in-out;\r\n  transition: all .5s ease-in-out;\r\n}\r\n.gray:hover {\r\n  -webkit-filter: grayscale(0);\r\n  filter: none;\r\n}<\/span><\/pre>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Zdru\u017een\u00e1 defin\u00edcia pozadia \u2013 background Umo\u017e\u0148uje skr\u00e1ten\u00fd z\u00e1pis v\u0161etk\u00fdch vlastnost\u00ed pozadia: background-color background-image background-position background-repeat background-attachement background-size body {background: #cf3 url(..\/images\/pozadi.jpg) top left repeat-x;} Pri pou\u017eit\u00ed zdru\u017eenej defin\u00edcie s\u00fa pri neuveden\u00fdch vlastnostiach nastaven\u00e9 v\u00fdchodiskov\u00e9 hodnoty. Farba pozadia \u2013 background-color p {background-color: #cf3;} #header p {background-color: transparent;} Obr\u00e1zok na pozad\u00ed \u2013 background-image body {background-image: url(..\/images\/pozadi.jpg);} .zadny-obraziek [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-210","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages\/210","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=210"}],"version-history":[{"count":1,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages\/210\/revisions"}],"predecessor-version":[{"id":211,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages\/210\/revisions\/211"}],"wp:attachment":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}