Notice: Undefined variable: root in /users/basti1012/www/index1.php on line 41
Svg to background Css

Svg to background Css

Lade dein Svg Bild hoch und als Ergebniss bekommst du einen Css Code , der dir ermöglicht das Bild direkt in der Css einzugeben

Der hier verwendete Code

<!DOCTYPE html> <html class="noJS minCSS mobile" lang=en-GB itemscope itemtype="http://schema.org/WebPage"> <head> <meta charset=utf-8> <meta name=viewport content="width=device-width, initial-scale=1"> <title>SVG to background-image converter</title> <script id=declare_globals> var LS = { globalJS : "342-globalJS", prismCSS : "155-prismCSS", prismJS : "112-prismJS", socialCSS : "129-socialCSS", disqusCSS : "107-disqusCSS", disqusJS : "118-disqusJS" }; var device="mobile",hasDemo='',d=document,useJS=!1,useCSS=!1,useLocalStorage=!1,useTouch=!1,addDisqus="1",tidyLS = false; !function(){"use strict";var e=d.documentElement,a=function(){try{return"localStorage"in window&&null!==window.localStorage}catch(e){return!1}}();useLocalStorage=a,e.className=e.className.replace("noJS","hasJS"),d.addEventListener&&d.documentElement.classList&&d.documentElement.classList&&window.File&&window.FileReader&&window.FileList&&(useJS=!0,e.className=e.className.replace("hasJS","useJS")),"ontouchstart"in window||navigator.maxTouchPoints>0||navigator.msMaxTouchPoints>0?(useTouch=!0,e.className+=" useTouch"):e.className+=" noTouch","flex"in e.style&&(useCSS=!0,e.className=e.className.replace("minCSS","useCSS")),performance&&performance.mark&&performance.mark("timeToTitle")}(); if(window.location.hash==="#noAnimations"){d.documentElement.className+=" noAnimations"} function removeIdNode(i){i&&(i=d.getElementById(i))&&i.parentNode.removeChild(i)} function scriptWriter(i,s,c){var a=d.createElement("script");a.src=s;a.async=!0;a.id=i;c&&(a.onload=c);d.body.appendChild(a)} function debounce(n,t,u){var e;return function(){var i=this,o=arguments,a=u&&!e;clearTimeout(e),e=setTimeout(function(){e=null,u||n.apply(i,o)},t||200),a&&n.apply(i,o)}} window.getFile=k; function k(l,e,a,f,g,h){var c=d.getElementById(a);if(useJS&&useCSS&&c){if(useLocalStorage)for(a=localStorage.length;a--;)if(localStorage.key(a)===e){c.innerHTML=localStorage.getItem(e);g=!0;removeIdNode(f);break}if(!g){var b=new XMLHttpRequest;b.version=e;b.onload=function(){var a=b.version;200===this.status&&(c.innerHTML=this.responseText,useLocalStorage&&a&&"X"!==a&&(localStorage[a]=this.responseText,tidyLS=!0,console.log(a+" added to local storage")),removeIdNode(f))};b.open("get",l,!0);b.send()}if(h)return h(c)}}; </script> <style id=basic_styles> .button,a{text-decoration:none}html{font-family:sans-serif;box-sizing:border-box;overflow-y:scroll}*,:after,:before{box-sizing:inherit}.mobile{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%}body{background:#fafafd;color:#3a2c49}h1,h2,h3,h4{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#4B3D5A;font-weight:400}h2,h3,h4,code{letter-spacing:-.01em}b,strong{font-weight:700}a{color:#236ECE;border-bottom:1px solid #236ECE}a:active,a:focus,a:hover{color:#014cac;border-color:#014cac}a:focus{background-color:#fff;outline:#fff solid .25rem}h1 a,h1 a:active,h1 a:focus,h1 a:hover{color:#4B3D5A;cursor:text;border:0 solid}img{border:0;max-width:100%;vertical-align:top}fieldset{border:0;padding:0;margin:0}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-decoration,search-cancel-button{-webkit-appearance:none}em,i,q{font-style:italic;padding-right:.1rem}code,kbd,pre{font-family:monospace,monospace}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button,select{text-transform:none}button{cursor:pointer;overflow:visible;vertical-align:bottom}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}pre{overflow:hidden;background-color:#FCFDFA}pre>code{overflow-x:scroll;display:block;padding:1rem}.hide{position:absolute;left:-200em;margin:0}.noscript{font-weight:700;color:#c00}.list--unstyled{list-style-type:none;padding-left:0}.button{display:block;color:#fff;background-color:#666;border:1px solid #242424;text-align:center;cursor:pointer;letter-spacing:1px;border-radius:4px;padding:.618em 1.618em}.smaller{font-size:smaller}small{font-size:small} .skipToContent{display:block;position:absolute;left:0;top:-4em;padding:.618em 1em;transition:all .4s} .skipToContent:focus{top:.384em;color:#fff;background:#3B2D4A;z-index:10;left:.384em;outline:.125rem solid #b3d4ff} </style> <style id=minimum_styles> h1{font-size:26px}h2{font-size:22px}h3{font-size:20px}small{font-size:small}hr{box-sizing:content-box;height:0;color:#fff}input{line-height:normal;padding:.156em;width:195px}body{line-height:24px;margin:16px;max-width:34em;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAACIAQMAAADgcTgQAAAAA1BMVEXu7u6DSdFtAAAADElEQVR4XmNAAaMAAAEQAAHPBGa9AAAAAElFTkSuQmCC) 0 -32px repeat-x}article,aside,footer,header,main,nav,section{display:block}h1,h2,h3{margin:42px 0 24px;line-height:1.2em}li{margin:0 0 16px}p{margin:0 0 24px}.content .r{margin:42px 0}.c,.list-nav .logo-li,.logo-svg,.main-header .r,.noJS .js-required,.search-input+button>svg{display:none}ul{margin:0}.list-nav li{display:inline-block;padding-right:1em}article .smaller{margin-bottom:10px}article h2{margin-bottom:6px}.content ul,pre{margin:24px 0}pre>code{padding:12px} </style> <style id=local_styles> .DZ,.DZ input{position:relative}.DZ,.DZ_text-1,.DZ_text-2{display:block}.DZ,.output{overflow:hidden}.DZ input{width:100%;opacity:0;min-height:15rem}@media (max-width:350px){.DZ input{width:268px}}.DZ{border:2px dashed #f90;cursor:pointer}.DZ_text,.DZ_text-1{position:absolute;left:0}.DZ>input+span{z-index:-1}.DZ_text{top:0;right:0;bottom:0;background-color:rgba(255,255,255,.4)}.DZ_text-1{width:100%;top:50%;text-align:center;transform:translateY(-50%);text-transform:uppercase;font-size:1.25rem}.DZ_text-2{font-size:1rem;text-transform:none;margin-top:.5rem;letter-spacing:0;transition:opacity 1s ease-out}.output{max-height:0}.output.ON{max-height:none;overflow:visible}.output h3{margin:1.618rem 0 .618rem}.OUT_btns{margin-top:1.618rem;display:flex;align-content:center;justify-content:space-around;flex-wrap:nowrap}.btn-copy{margin:0 .618rem 0 0}.button.btn-copied{background-color:#477343;border:1px solid #242424}.OUT_fgr{margin:1.618rem 0 0;padding:0}.DZ{transition:background-color .3s ease-out}.DZ.-dragover{background-color:#fff}.DZ .spot{top:0;left:0;width:100%;height:100%;border-radius:0;pointer-events:none}.-dragover .spot{animation:spot-open .6s ease-in}.spotInvalid{background-color:#c00;animation:spot-invalid .6s ease-out}@keyframes spot-invalid{0%{opacity:1;transform:scale(0)}100%{opacity:0;transform:scale(2.4)}} article, aside, footer, header, main, nav, section { display: flex; flex-direction: column; } </style> </head> <body id="svg_tool" class="svg_tool"> <main id=main aria-label="Page content" tabindex=-1 itemscope itemtype="http://schema.org/BlogPosting" class=inactive> <header id=main_header aria-labelledby="main_h" class="main-header flex fp "> <div class=l> <h1 id=main_h itemprop=headline><a href="/tools/svg-to-background-image-conversion/" tabindex=-1 itemprop=url> <abbr title="Scalable Vector Graphic">SVG</abbr> to <abbr title="Cascading Style Sheet">CSS</abbr> Hintergrundbildkonverter</a></h1> <p itemprop=description><i>Formatieren Sie <abbr title="Scalable Vector Graphic">SVG</abbr> - Bilder in <abbr title="Uniform Resource Identifier">URI</abbr> s um, um sie als browserübergreifende <abbr title="Cascading Style Sheet">CSS</abbr> -Hintergrundbilder in Ihrem Stylesheet zu verwenden.</i></p> </div> <div class=c></div> <div class=r aria-hidden=true> <svg class=header_svg style="max-height:9rem" viewBox="0 0 48 33"> <g fill="#4B3D5A"> <path d="M12.5 12L24 32.5H1L12.4 12z" style="filter:blur(0.2px)"/> <path d="M29.5 0L47 32.7H12L29.5 0z"/> <circle cx="5.9" cy="6.1" r="3.7" fill="#fe0" style="filter:blur(0.7px)"/> <g id="clouds" fill="#eee" style="filter:blur(0.3px)"> <circle cx="27.5" cy="5" r="2"/> <circle cx="32" cy="4" r="3.5"/> <circle cx="36" cy="5.5" r="2"/> <circle cx="38.5" cy="5.25" r="1"/> </g> </g> </svg> <style> .main-header > .r { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' opacity='0.7' fill-rule='evenodd' viewBox='0 0 1920 64'%3E%3Cpath fill='%23fcfcfa' d='M1920 64H0V0h1920v64zM20 36a11 11 0 110 22 11 11 0 010-22z'/%3E%3Cpath stroke='%23edf3ed' stroke-width='2.6' d='M0 1h1920M0 5h1920M0 9h1920M0 13h1920M0 17h1920M0 21h1920M0 25h1920M0 29h1920'/%3E%3Cpath stroke='%23e4ede4' stroke-dasharray='2 6 2 6' stroke-width='2' d='M40 2v60'/%3E%3Cpath fill-opacity='.2' d='M20 36c6 0 11 5 11 11s-5 11-11 11S9 53 9 47s5-11 11-11zm8 6a10 10 0 00-16 0c-2 2-2 4-2 6 0 6 4 10 10 10s10-4 10-10c0-2 0-4-2-6z'/%3E%3C/svg%3E"); background-size: 120rem 4rem;} </style> </div> </header> <div class="content flex fp"> <div class=l itemprop=articleBody> <h2 class=hide>SVG to CSS background-image conversion</h2> <form id=svg2css class=js-required> <label id=lbl_drop_zone for=files class=DZ> <input type=file id=files multiple> <span class="DZ_text"> <span class=DZ_text-1>Drag &amp; drop SVG(s) here <span class=DZ_text-2>Alternatively click to choose file(s)</span> </span> </span> <span id=DZ_spot class=spot></span> </label> </form> <section id=output class=output> <h3 class=hide>Output SVGs as CSS background-images</h3> <div class=OUT_btns> <button id=btn_copy class="button orange btn-copy" data-clipboard-target="#output_area">Copy CSS</button> <button id=btn_reset class="button lightgrey btn-reset" type=reset>Reset</button> </div> <figure class="OUT_fgr shadowlift twist4"> <figcaption class=OUT_cptn>Generated CSS:</figcaption> <pre class=OUT_pre><code id=output_area class="OUT_code language-css" spellcheck=false contenteditable> </code></pre> </figure> </section> </div> </main> <script id=local_scripts> var btn_reset = document.getElementById("btn_reset"); if (btn_reset) { btn_reset.addEventListener("click", function(e){ window.location=window.location.href; }, false); } window.addEventListener("load", function () { function initCopyButton() { var btn_copy = document.getElementById("btn_copy"); if (btn_copy) { btn_copy.initialTextContent = btn_copy.textContent; btn_copy.addEventListener("click", function(e){ e.preventDefault(); }, false); } var clipboard = new Clipboard('#btn_copy'); clipboard.on('success', function(e) { var btn = e.trigger; if (btn && btn.textContent === btn.initialTextContent) { btn.textContent = btn.textContent.replace("Copy", "Copied"); btn.classList.add("btn-copied"); setTimeout(function(){ // reset copy button btn.textContent = btn.initialTextContent; btn.classList.remove("btn-copied"); }, 2000); } }); } // Safari cannot find the localstorage embedded function immediately so a small delay added setTimeout(function() { // Global function // scriptWriter("svg-conversion", "svg-conversion.js", false); scriptWriter("clipboard", "/js_webseite/clipboard.min.js", initCopyButton); }, 300); }, false); </script> <script defer src="/js_webseite/svg-conversion.min.js"></script> </body> </html>