Hur man använder brytpunkter och mediefrågor med bakgrundsklipp i medvind

När du skapar olika avsnitt på en webbsida kan det finnas scenarier där programmeraren behöver klippa bakgrunden eller modifiera den för att samla innehållet. Denna metod hjälper till att hantera det bifogade innehållet på ett effektivt sätt samt utforma olika sidavsnitt.

Den här bloggen utvecklar följande kärnkoncept:

Hur man använder/använder brytpunkter och mediefrågor med bakgrundsklipp i medvind?
Använda brytpunkter med bakgrundsklipp i medvind.
Använda mediafrågor med bakgrundsklipp i medvind.

Hur man använder/använder brytpunkter och mediefrågor med bakgrundsklipp i medvind?

den ' bg-clip-{keyword} ”-verktyget används för att ställa in begränsningsrutan för elementets bakgrund. Det här verktyget kan användas med flera egenskaper, som ' stoppningslåda ', ' border-box ', ' innehållslåda ', och ' textruta ”.

Exempel 1: Tillämpa brytpunkter med bakgrundsklipp i medvind

Det här exemplet tillämpar brytpunkterna med bakgrundsklippet via den tillämpade ' bg-clip-{keyword} ' verktyg med ' md 'dvs medelstora skärmar och ' lg ”d.v.s. stora skärmklasser:

< html >
< huvud >
< meta teckenuppsättning = 'utf-8' >
< meta namn = 'viewport' innehåll = 'width=device-width, initial-scale=1' >
< manus src = 'https://cdn.tailwindcss.com' >< / manus >
< / huvud >
< kropp >
< textområde klass = 'bg-clip-border p-6 bg-yellow-500 border-4 border-red-500 kantstreckad md:bg-clip-text lg:bg-clip-padding' > Detta är Tailwind CSS < / textområde >
< / kropp >
< / html >

Enligt dessa kodrader:

Ange först CDN-sökvägen för att använda Tailwind-funktionerna.
Gör sedan ett ''-element som består av ' <strong> bg-clip-{keyword}</strong> '-verktyget så att det är inställt på 'kant' på små skärmar och inställt på ' <strong> bg-klipp-text</strong> ' och ' <strong> bg-clip-stoppning</strong> ' verktyg på mellanstora och stora skärmar via ' <strong> md</strong> ' och ' <strong> lg</strong> ” klasser, respektive.</li> </ul> <p> <strong> Notera:</strong> Att specificera verktyget är helt enkelt detsamma som att specificera det i ' <strong> sm</strong> ' klass.</p><hr> <br /> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4062866992167421" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4062866992167421" data-ad-slot="9858463164" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><br /> <hr> <p> <strong> Produktion</strong> </p> <p> <img class="alignnone wp-image-392117 size-full" alt="" src="https://softoban.com/img/other/ED/how-to-use-breakpoints-and-media-queries-with-background-clip-in-tailwind-1.gif"></p> <br /> <ins class="staticpubads89354" data-sizes-desktop="728x90,750x100,750x200,750x300" data-sizes-mobile="300x250,336x280,360x300" data-slot="5"></ins><br /> <p> Detta resultat betyder att när skärmstorleken utökas, klipps bakgrunden i enlighet därmed.</p> <h2 id="c"> <strong> Exempel 2: Använda mediefrågor med bakgrundsklipp i medvind</strong> </h2> <p> Följande koddemonstration tillämpar mediafrågorna med 'Bakgrundsklipp' via ' <strong> @media</strong> regel och den angivna parametern:</p> <!DOCTYPE html> <br> < <a href="http://december.com/html/4/element/html.html"><span class="kw2"> html</span></a> > <br> < <a href="http://december.com/html/4/element/head.html"><span class="kw2"> huvud</span></a> > <br> < <a href="http://december.com/html/4/element/meta.html"><span class="kw2"> meta</span></a> <span class="kw3"> teckenuppsättning</span><span class="sy0"> =</span><span class="st0"> 'utf-8'</span> > <br> < <a href="http://december.com/html/4/element/meta.html"><span class="kw2"> meta</span></a> <span class="kw3"> namn</span><span class="sy0"> =</span><span class="st0"> 'viewport'</span> <span class="kw3"> innehåll</span><span class="sy0"> =</span><span class="st0"> 'width=device-width, initial-scale=1'</span> > <br> < <a href="http://december.com/html/4/element/script.html"><span class="kw2"> manus</span></a> <span class="kw3"> src</span><span class="sy0"> =</span><span class="st0"> 'https://cdn.tailwindcss.com'</span> ><<span class="sy0"> /</span> <a href="http://december.com/html/4/element/script.html"><span class="kw2"> manus</span></a> > <br> <<span class="sy0"> /</span> <a href="http://december.com/html/4/element/head.html"><span class="kw2"> huvud</span></a> > <br> < <a href="http://december.com/html/4/element/body.html"><span class="kw2"> kropp</span></a> > <br> < <a href="http://december.com/html/4/element/textarea.html"><span class="kw2"> textområde</span></a> <span class="kw3"> klass</span><span class="sy0"> =</span><span class="st0"> 'p-6 bg-gul-500 kant-4 kant-röd-500 kantstreckad'</span> <span class="kw3"> id</span><span class="sy0"> =</span><span class="st0"> 'temp'</span> >Detta är Tailwind CSS<<span class="sy0"> /</span> <a href="http://december.com/html/4/element/textarea.html"><span class="kw2"> textområde</span></a> > <br> <<span class="sy0"> /</span> <a href="http://december.com/html/4/element/body.html"><span class="kw2"> kropp</span></a> > <br> < <a href="http://december.com/html/4/element/style.html"><span class="kw2"> stil</span></a> <span class="kw3"> typ</span><span class="sy0"> =</span><span class="st0"> 'text/css'</span> > <br> #temp<span class="br0"> {</span> <br> bakgrundsklipp: border-box; <br> <span class="br0"> }</span> <br> @<span class="kw3"> media</span> <span class="br0"> (</span> max-<span class="kw3"> bredd</span> :500px<span class="br0"> )</span><span class="br0"> {</span> <br> #temp<span class="br0"> {</span> <br> bakgrundsklipp: padding-box; <br> <span class="br0"> }</span><span class="br0"> }</span> <br> <<span class="sy0"> /</span> <a href="http://december.com/html/4/element/style.html"><span class="kw2"> stil</span></a> > <br> <<span class="sy0"> /</span> <a href="http://december.com/html/4/element/html.html"><span class="kw2"> html</span></a> ><p> I detta kodavsnitt:</p> <ul> <li> Upprepa metoderna för att införliva Tailwind CDN-sökvägen och skapa elementet '<textarea>'.</li> <li> Nu, i CSS-koden, ange standard ' <strong> bakgrundsklipp</strong> ' egendom som ' <strong> border-box</strong> ”.</li> <li> Efter det implementerar du ' <strong> @media</strong> ' regel med den givna parametern så att så länge skärmens bredd är lika med '500' pixlar, ' <strong> bakgrundsklipp</strong> ' egenskapen är inställd på ' <strong> stoppningslåda</strong> ”.</li> </ul> <p> <strong> Produktion</strong> </p> <p> <img class="alignnone wp-image-392118 size-full" alt="" src="https://softoban.com/img/other/ED/how-to-use-breakpoints-and-media-queries-with-background-clip-in-tailwind-2.gif"></p> <p> Från detta resultat kan det verifieras att bakgrundsklippet övergår i enlighet med skärmens ändrade bredd.</p> <h2> <strong> Slutsats</strong> </h2> <p> Bakgrundsklippet kan användas med Tailwind Breakpoints och Media Queries via den tillämpade ' <strong> bg-clip-{keyword}</strong> ' verktyg med ' <strong> md</strong> ' eller ' <strong> lg</strong> ' klasser eller via ' <strong> @media</strong> ' regel. Nyckelordet kan ställas in på 'padding-box', 'border-box', 'content-box', 'text-box' och mer. I den här guiden har vi demonstrerat användningen av brytpunkter och mediafrågor med bakgrundsklipp i medvind.</p> </article> <div class="d-flex justify-content-center"> <script type="text/javascript">(function() { if (window.pluso)if (typeof window.pluso.start == "function") return; if (window.ifpluso==undefined) { window.ifpluso = 1; var d = document, s = d.createElement('script'), g = 'getElementsByTagName'; s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true; s.src = ('https:' == window.location.protocol ? 'https' : 'http') + '://share.pluso.ru/pluso-like.js'; var h=d[g]('body')[0]; h.appendChild(s); }})();</script> <div class="pluso" data-background="transparent" data-options="big,round,line,horizontal,nocounter,theme=06" data-services="facebook,twitter,email,print"></div> </div> <div class="tag-widget post-tag-container mb-5 mt-5"> <div class="tagcloud"> <a href="/ovrig/" class="tag-cloud-link">Övrig</a> </div> </div> </div> </div> <div class="col-lg-4 sidebar ftco-animate bg-light pt-5"> <div class="sidebar-box ftco-animate"> <h3 class="sidebar-heading">Kategori</h3> <ul class="categories"> <li> <a href="/raspberry-pi/">Raspberry Pi</a> </li><li> <a href="/ethernet/">Ethernet</a> </li><li> <a href="/other/">Övrig</a> </li><li> <a href="/nano/">Nano</a> </li><li> <a href="/zoom/">Zoom</a> </li><li> <a href="/cinnamon/">Kanel</a> </li><li> <a href="/reviews/">Recensioner</a> </li><li> <a href="/zorinos/">Zorinos</a> </li><li> <a href="/radio/">Radio</a> </li><li> <a href="/minecraft/">Minecraft</a> </li><li> <a href="/ssh/">Ssh</a> </li><li> <a href="/openvas/">Openvas</a> </li><li> <a href="/compression/">Kompression</a> </li><li> <a href="/laravel/">Laravel</a> </li><li> <a href="/aircrack/">Flygbricka</a> </li><li> <a href="/office-productivity-software/">Office -Produktivitetsprogramvara</a> </li><li> <a href="/boot/">Känga</a> </li><li> <a href="/system-calls/">Systemsamtal</a> </li><li> <a href="/sysctl/">Sysctl</a> </li><li> <a href="/networking/">Nätverk</a> </li><li> <a href="/gpu/">Gpu</a> </li><li> <a href="/gimp/">Gimp</a> </li><li> <a href="/plex/">Plex</a> </li><li> <a href="/uefi/">Uefi</a> </li><li> <a href="/docker/">Hamnarbetare</a> </li><li> <a href="/firewall/">Brandvägg</a> </li><li> <a href="/wireshark/">Wireshark</a> </li><li> <a href="/synology/">Synologi</a> </li><li> <a href="/pdf/">Pdf</a> </li><li> <a href="/ethereum/">Eterum</a> </li><li> <a href="/parrot-os/">Papegoja Os</a> </li><li> <a href="/sublime/">Sublim</a> </li><li> <a href="/selinux/">Selinux</a> </li><li> <a href="/hyper-v/">Hyper-V</a> </li><li> <a href="/phone/">Telefon</a> </li><li> <a href="/kodi/">Koda</a> </li><li> <a href="/gnome/">Gnome</a> </li><li> <a href="/manjaro/">Delikatess</a> </li><li> <a href="/mouse/">Mus</a> </li><li> <a href="/nmap/">Nmap</a> </li><li> <a href="/metasploit/">Metasploit</a> </li><li> <a href="/torrent/">Torrent</a> </li><li> <a href="/tablet/">Läsplatta</a> </li><li> <a href="/pycharm/">Pycharm</a> </li><li> <a href="/curl/">Ringla</a> </li><li> <a href="/kde/">Var</a> </li><li> <a href="/gcc/">Gcc</a> </li><li> <a href="/fonts/">Typsnitt</a> </li><li> <a href="/ssl/">Ssl</a> </li><li> <a href="/nvidia/">Nvidia</a> </li><li> <a href="/images/">Bilder</a> </li><li> <a href="/usb/">Usb</a> </li><li> <a href="/squid/">Bläckfisk</a> </li><li> <a href="/mate/">Para</a> </li><li> <a href="/vlc-media-player/">Vlc Media Player</a> </li><li> <a href="/dns/">Dns</a> </li><li> <a href="/bitcoin/">Bitcoin</a> </li><li> <a href="/keyboard/">Tangentbord</a> </li><li> <a href="/inkscape/">Inkscape</a> </li><li> <a href="/encryption/">Kryptering</a> </li><li> <a href="/fedora/">Fedora</a> </li><li> <a href="/owncloud/">Owncloud</a> </li><li> <a href="/scanner/">Scanner</a> </li><li> <a href="/atom/">Atom</a> </li><li> <a href="/red-hat/">Röd Hatt</a> </li><li> <a href="/teamviewer/">Teamviewer</a> </li><li> <a href="/skype/">Skype</a> </li><li> <a href="/vpn/">Vpn</a> </li><li> <a href="/xfce/">Xfce</a> </li><li> <a href="/jupyter-notebook/">Jupyter Anteckningsbok</a> </li><li> <a href="/nfs/">Nfs</a> </li><li> <a href="/blog/">Blogg</a> </li><li> <a href="/lvm/">Lvm</a> </li><li> <a href="/suse/">Suse</a> </li><li> <a href="/media-players/">Mediaspelare</a> </li><li> <a href="/posix/">Posix</a> </li><li> <a href="/steam/">Ånga</a> </li><li> <a href="/jenkins/">Jenkins</a> </li><li> <a href="/power/">Kraft</a> </li><li> <a href="/oracle-linux/">Oracle Linux</a> </li><li> <a href="/netstat/">Netstat</a> </li><li> <a href="/kvm/">Kvm</a> </li><li> <a href="/bluetooth/">Blåtand</a> </li><li> <a href="/ssd/">Ssd</a> </li><li> <a href="/grep/">Grepp</a> </li><li> <a href="/gentoo/">Gentoo</a> </li><li> <a href="/odyssey/">Odyssé</a> </li><li> <a href="/audio/">Audio</a> </li><li> <a href="/cpu/">Cpu</a> </li><li> <a href="/tensorflow/">Tensorflöde</a> </li><li> <a href="/autodesk/">Autodesk</a> </li><li> <a href="/lubuntu/">Lubuntu</a> </li><li> <a href="/llvm/">Llvm</a> </li><li> <a href="/windows/">Windows</a> </li><li> <a href="/microsoft-edge/">Microsoft Edge (Äldre)</a> </li><li> <a href="/internet-explorer/">Internet Explorer</a> </li><li> <a href="/office/">Kontor</a> </li><li> <a href="/ovrig/">Övrig</a> </li><li> <a href="/webbkamera/">webbkamera</a> </li><li> <a href="/mediaspelare/">mediaspelare</a> </li><li> <a href="/cpanel/">cPanel</a> </li><li> <a href="/haproxi/">haproxi</a> </li><li> <a href="/tomte/">tomte</a> </li><li> <a href="/kanga/">känga</a> </li><li> <a href="/sublim/">sublim</a> </li><li> <a href="/ubuntu-24-04-cat/">Ubuntu 24.04</a> </li><li> <a href="/nasta-moln/">nästa moln</a> </li><li> <a href="/dygd/">dygd</a> </li><li> <a href="/usb-genomforing/">usb-genomföring</a> </li><li> <a href="/secure-boot/">#secure-boot</a> </li><li> <a href="/enhetsgenomforing/">enhetsgenomföring</a> </li><li> <a href="/sdn/">SDN</a> </li><li> <a href="/drivrutinsinstallation/">drivrutinsinstallation</a> </li> </ul> </div> <div class="sidebar-box ftco-animate"> <h3 class="sidebar-heading">Populära Inlägg</h3> <div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/70/how-to-understand-magnetic-hysteresis-loop-and-b-h-curve-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/hur-man-forstar-magnetisk-hysteresloop-och-b-h-kurva">Hur man förstår magnetisk hysteresloop och B-H-kurva</a> </h3> <div class="meta"> <div> <a href="/ovrig/"><span class="icon-chat"></span> Övrig</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/39/monitoring-raspberry-pi-system-using-influxdb-telegraf-and-grafana-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/overvakning-av-raspberry-pi-system-med-influxdb-telegraf-och-grafana">Övervakning av Raspberry Pi System med InfluxDB, Telegraf och Grafana</a> </h3> <div class="meta"> <div> <a href="/ovrig/"><span class="icon-chat"></span> Övrig</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/2E/where-to-place-javascript-in-an-html-file-1.gif);"></a> <div class="text"> <h3 class="heading"> <a href="/var-man-placerar-javascript-i-en-html-fil">Var man placerar JavaScript i en HTML-fil</a> </h3> <div class="meta"> <div> <a href="/ovrig/"><span class="icon-chat"></span> Övrig</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/26/how-to-delete-a-git-tag-in-aws-codecommit-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/hur-tar-man-bort-en-git-tagg-i-aws-codecommit">Hur tar man bort en Git-tagg i AWS CodeCommit?</a> </h3> <div class="meta"> <div> <a href="/ovrig/"><span class="icon-chat"></span> Övrig</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/D1/how-to-fix-systemctl-status-showing-degraded-state-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/sa-har-fixar-du-systemctl-status-som-visar-degraderat-tillstand">Så här fixar du systemctl-status som visar degraderat tillstånd</a> </h3> <div class="meta"> <div> <a href="/ovrig/"><span class="icon-chat"></span> Övrig</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/54/postgres-get-column-type-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/postgres-fa-kolumntyp">Postgres Få kolumntyp</a> </h3> <div class="meta"> <div> <a href="/ovrig/"><span class="icon-chat"></span> Övrig</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/B1/what-is-void-in-c-and-c-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/vad-ar-void-i-c-och-c">Vad är void* i C och C++</a> </h3> <div class="meta"> <div> <a href="/ovrig/"><span class="icon-chat"></span> Övrig</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/F0/how-to-create-a-unique-index-in-mongodb-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/hur-man-skapar-ett-unikt-index-i-mongodb">Hur man skapar ett unikt index i MongoDB</a> </h3> <div class="meta"> <div> <a href="/ovrig/"><span class="icon-chat"></span> Övrig</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/FE/how-to-create-and-use-python-generators-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/hur-man-skapar-och-anvander-python-generatorer">Hur man skapar och använder Python-generatorer</a> </h3> <div class="meta"> <div> <a href="/ovrig/"><span class="icon-chat"></span> Övrig</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/A3/what-are-the-validating-parameters-with-powershell-validatescript-walkthrough-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/vilka-ar-valideringsparametrarna-med-powershell-validatescript-walkthrough">Vilka är valideringsparametrarna med PowerShell ValidateScript [Walkthrough]?</a> </h3> <div class="meta"> <div> <a href="/ovrig/"><span class="icon-chat"></span> Övrig</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/54/different-methods-to-remove-nan-values-from-a-matrix-in-matlab-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/olika-metoder-for-att-ta-bort-nan-varden-fran-en-matris-i-matlab">Olika metoder för att ta bort NaN-värden från en matris i MATLAB</a> </h3> <div class="meta"> <div> <a href="/ovrig/"><span class="icon-chat"></span> Övrig</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/05/how-to-find-a-linux-ami-in-amazon-ec2-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/hur-hittar-man-en-linux-ami-i-amazon-ec2">Hur hittar man en Linux AMI i Amazon EC2?</a> </h3> <div class="meta"> <div> <a href="/ovrig/"><span class="icon-chat"></span> Övrig</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/B4/what-is-to-date-in-oracle-and-how-to-use-it-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/vad-ar-to-date-i-oracle-och-hur-anvander-man-det">Vad är TO_DATE i Oracle och hur använder man det?</a> </h3> <div class="meta"> <div> <a href="/ovrig/"><span class="icon-chat"></span> Övrig</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/93/mysql-on-amazon-rds-versions-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/mysql-pa-amazon-rds-versioner">MySQL på Amazon RDS-versioner</a> </h3> <div class="meta"> <div> <a href="/ovrig/"><span class="icon-chat"></span> Övrig</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/57/install-smartgit-git-client-on-ubuntu-linux-mint-centos-fedora-rhel-1.jpg);"></a> <div class="text"> <h3 class="heading"> <a href="/installera-smartgit-git-client-pa-ubuntu-linux-mint-centos-fedora-rhel">Installera SmartGit Git Client på Ubuntu, Linux Mint, CentOS, Fedora, RHEL</a> </h3> <div class="meta"> <div> <a href="/ovrig/"><span class="icon-chat"></span> Övrig</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/7A/adding-an-image-from-a-url-8211-html-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/lagga-till-en-bild-fran-en-url-html">Lägga till en bild från en URL – HTML</a> </h3> <div class="meta"> <div> <a href="/ovrig/"><span class="icon-chat"></span> Övrig</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/AA/how-to-use-terraform-aws-provider-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/hur-anvander-man-terraform-aws-provider">Hur använder man Terraform AWS Provider?</a> </h3> <div class="meta"> <div> <a href="/ovrig/"><span class="icon-chat"></span> Övrig</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/7A/how-to-make-scaffolding-in-minecraft-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/hur-man-gor-byggnadsstallningar-i-minecraft">Hur man gör byggnadsställningar i Minecraft</a> </h3> <div class="meta"> <div> <a href="/ovrig/"><span class="icon-chat"></span> Övrig</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/71/mysql-where-date-greater-than-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/mysql-where-date-storre-an">MySQL WHERE DATE Större än</a> </h3> <div class="meta"> <div> <a href="/ovrig/"><span class="icon-chat"></span> Övrig</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/7D/how-do-i-create-a-new-database-user-in-mysql-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/hur-skapar-jag-en-ny-databasanvandare-i-mysql">Hur skapar jag en ny databasanvändare i MySQL?</a> </h3> <div class="meta"> <div> <a href="/ovrig/"><span class="icon-chat"></span> Övrig</a> </div> </div> </div> </div> </div> </div> </div> </div> </section> </div> </div>  <div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#F96D00"/></svg></div> <script src="https://softoban.com/template/js/jquery.min.js"></script> <script src="https://softoban.com/template/js/jquery-migrate-3.0.1.min.js"></script> <script src="https://softoban.com/template/js/popper.min.js"></script> <script src="https://softoban.com/template/js/bootstrap.min.js"></script> <script src="https://softoban.com/template/js/jquery.easing.1.3.js"></script> <script src="https://softoban.com/template/js/jquery.waypoints.min.js"></script> <script src="https://softoban.com/template/js/jquery.stellar.min.js"></script> <script src="https://softoban.com/template/js/owl.carousel.min.js"></script> <script src="https://softoban.com/template/js/jquery.magnific-popup.min.js"></script> <script src="https://softoban.com/template/js/aos.js"></script> <script src="https://softoban.com/template/js/jquery.animateNumber.min.js"></script> <script src="https://softoban.com/template/js/scrollax.min.js"></script> <script src="https://softoban.com/template/js/main.js"></script> <script async="" defer="" src="//www.instagram.com/embed.js"></script> <script async="" src="https://platform.twitter.com/widgets.js"></script> <script> window.onload = function(){ for(i in document.images) { if(document.images[i].naturalWidth==0){ if(window.location.pathname.length > 1){ document.images[i].style="display:none" } else { document.images[i].src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" } } } } $(document).ready(() => { $('nav').find('a').each(function(){ if($(this).attr('href') == window.location.pathname){ $(this).parent('li').addClass('active') } }) var wrapper = '<div class="embeded-video"></div>'; if($('iframe[width="560"]').length > 1){ $('.m_v').remove(); }else{ } $('iframe[src^="https://www.youtube.com/embed/"]').wrap(wrapper); let loc = window.location.pathname; if(loc == '/privacy-policy'){ $('div.embeded-video').remove(); $('blockquote').remove(); } }) </script> <script type="text/javascript" src="https://s.skimresources.com/js/192355X1670518.skimlinks.js"></script></body> </html>