Background-blend-mode Test

Developer
Size
4,744 Kb
Views
14,168

How do I make an background-blend-mode test?

Test of background blend mode.. What is a background-blend-mode test? How do you make a background-blend-mode test? This script and codes were developed by Oliver Kühn on 15 November 2022, Tuesday.

Background-blend-mode Test Previews

Background-blend-mode Test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>background-blend-mode Test</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Stalinist+One'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="rgb test-1"></div>
<div class="rgb test-2"></div>
</body>
</html>

Background-blend-mode Test - Script Codes CSS Codes

body
{ background-color: #333;
}
.rgb
{ width: 150px; height: 150px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%);
}
.test-1
{ -webkit-transform: translate(-105px, -50%); background: -webkit-linear-gradient( rgba(255,0,0,1) 0%, rgba(255,0,0,1) 33.33%, transparent 33.33% ), -webkit-linear-gradient( rgba(0,255,0,1) 0%, rgba(0,255,0,1) 66.66%, transparent 66.66% ), -webkit-linear-gradient( rgba(0,0,255,1) 0%, rgba(0,0,255,1) 100% ); background-blend-mode: difference; /*-webkit-background-blend-mode: difference;*/ z-index: 20;
}
.test-2 { -webkit-transform: translate(105px, -50%); background-blend-mode: difference; /*-webkit-background-blend-mode: difference;*/ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA5hJREFUeNrsnYFx2zAMRcVcB3AnsLOBM4GVCeJOEGeSXifwdQJnAzkTWJ5A2sDxBM4GKlFBV1mVHckhRZD6/4LyzndpVTwDBEUJVJFgFVE00cOcbcpj9VkX5do+eDzymKvyM5FSAgHE2hY8zi39UwQm1banUTIgJxC0rbQl2gpHlvA1TMYMIta2cQjhktE1xWMCQd/ETCCIptE1rkIHcfAARNMOQYHh1LTzEETTdl6nMp6sNwGAaNrau8lfX/BS2ylAGJXR/23pS1SsAwbhT7ToC5t5Uj3ZqMZm0mDMA09RXVLYXAqM1YhBNG0FGIACGOKgAIYgKIBhF4rqW03pIcOmQS89qHL/xSwQrrWzaMx7Brfpg6G8GwPCq9FdJKXW9k8UIY/GdiZHdjvE2m0WIxHCN9ESfMmN6Id2+PZmIJyqDpg3jM4n99dS190nf8EaMIyKfPnzpgjh3bEdfGhFNMGnfYEQjBi+syJ6FuwRq3EPVvHqAhCayGf4IlvVu3b+/aeTOpMDDPuatUWJagGSYUU+3ApeA3i4CASVlfuKq5mynuGfwfXcGiG8Kj/BP070vVq91yNkCb8407ItZT3BL870dJaykK7kpK0qQnCLxL3iespawB/OtainLCwGhSwSFeYPOdJA1DdEhhzRnZI7ABGlOQGZwg9iNEWECIwQPMQgRxOqsgr4QVClBSAAAgEIgEAAAiAQgAAIBCAAgs0pOcrpXhZapMrR34cccvhBVoQc4QcxOiJChEVI9dQJKi0JFZb+qZ7LQpQIiA76owKSwh/OldaB7OEP59pz2sLD1kL072FrfllkC58407bthZ03+MWZ3mqVVimkLffp6ixC+INX+GZwvda7A+G1aPc6ey0ajQMcLwabjQPa+mX9hp8G03++RvMZd+rWfIb1C/6yrlYfo4GZG11sYIYWfwIqq85Cv147B1de8znaxA6rr7WJ5V98gR+N6cVIu3GkLkGtxmupC834v7Aijzo248dxFcPMG2aPq6hBwYEu/dXrQJdb5hM0WcY5VIABKDjLEDAAJTQY9eoLhxMLW6Ph+G6BwgH3QkUnuwWewk6Fb53AA44WP6Li2s4jbQcHAGJXhLSlzeXxwUMQBzHlrEUwmSfVU7ggLqSyjcQ972LMT9vw5E9RkziEkPA1OJ+slTQ4UfntXPBoa/VL+xNpVL5GlipB3SyUD6mNwUx5nPQAlfOOHY3UICFXwl9w/SPAAEUD2k/Km5XvAAAAAElFTkSuQmCC) no-repeat, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA5ZJREFUeNrsnYFt6jAQhu1OQCeAbkAngE5QOkHpJE9vAvQmoBtAJyBMkGxAmYBuwLNzjghpoAm147Pz/1awhNSW3sedz7FzloKzjmKgXsfmGpq+eK+JMnV9mX5v+kzI/D2WkgwBTNU1Mf3Y0V/SYBJ1bfOeMSA/EI5irq6Vuny1lfkMgz6DmKpr6RHCpbbMP1uPQOhvYsoQRLWl+WeNHMQuABDVtosLDIWmTYAgqm0TdiijwXoZAYhqW4Q3+B/FTF2HCGEU7ZD/j4F4xSJiEAF5y1GMAsmeXGRjI24wxpGHqCYhbMwFxrzHIKptDhiAAhj8oAAGIyiA4RSKbJ1NCZXmQW30qKyc2QdCuXZqVuyg5voyUD7tAaHZ6MbhCl7s0h7yZG9lsl+3Q9zdZrHiIXQTbYUvuRW9KIuvbwdCoWqHccPqePJwLXTd/fALFoBhVdqWf27zEFod28CGTqQH+KQtEA1jCts5kd4L9oTZeACzeHkBiB7IR/giO9Wnsv7Dz4M6kQMM9xrVeYmsAZJiRt7hDF6Kx8tAkFl5z7iqIesV9ulcr/UeQrPyA+zjRffF7L3sITPYxZtmdSHrGXbxpufzkIVwxSZsFR6CWyT+NS2HrAns4V2TcsjCZJDJJFFi/GAkKaTE7JzXrP0OoYqVxhrIEHZgoyE8hKGHYBMDHw1kvpgIMUq0AARAIAABEAhAAAQCEACBAKT3QLA4xUeZvpeFEql8lG9yyGAHXh6yhx3YaA8PYeYhxa4TZFo8UixZ7MuClzDwDv1SAElgD+9KykC2sId3bSlq0RiCzXL+VdpsTQ+LrGETb1rXPbDzAbt408cp0SqEsOU9XJ17CL3xDtt0rvdydSA8Fu1fZ49Fo3CA78lgpXBAXb2sf7BTZ/pmaxSf8aeGxWdIf2Ev56q1MQqY+dHFAmYo8ccgs2ou1Ot1c3DlFaFMbLf6ZZlY+sE32NGa3uyUG0foYlRq/BS6UIz/NzPyhsX4cVxFN+OG5eMqTlBwoEt7tTrQ5ZbxBEWWcQ4VYAAKzjIEDECJDkY5+8LhxMzmaDi+m6FwwL3gCmYWeQg7mNPrAlK83hKIV1xbedTLweGD2JhV1EhE6fEuQBA7PumsOzBpINlTxCDqQ9mS5Zr3sc+7bWjw116z8ghhZT6D98FasoNDe8Empnc1+9XrE4mgx8gSe8dqxwbkUmgjMEPTD1qAysyKne73gjY3J5z/3f8CDACqv9scfnQzoQAAAABJRU5ErkJggg==) no-repeat 50px 0, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA5pJREFUeNrsnYFxozAQRVEqcCqw0wGpwE4FcSqIU8nNVeC5CkgH+CoAVwAdEFdgd8BJQngIgRzEElqJ/2fWmslMEnufd6VFsGIBeZUb/hJyW6pxocYhyrld1HhSIzd2ofppGTHnC2cLAGs1hob+kQCTcjtWI11AliCUO24xt9KSxeo9LOYMgkdAGVmE0GeRSpOzASG+iRlBEG3LqvfqN4jCARBtKzwDI1NT4iCItiWOpzI5WUcegOiaY1yb/Mstt7OHMGo7V5/RjajYewyibXvC0VKuHFk9mViNrajBCD1PUUNSWEgFxm7GINq2AwxAAQyCUACDEBTAMAmFjV9NBRm2DEbpkbs5NwBErrUztWMHDddFQfnQCERWo4nBHTzfJSLkSePO5Kwuhxi8zKIlQuRFtBhfci164S4/3ABEpqoC84bW+eThu9R1958/sAcMrRK+/PXDCJG7Ywl8aERigk/HAhEwNvCdEXEY7AnVuANVfE+EiDstghW+yEbFC0X2MGBSl+QAw7xWXVHSESFiSxIV+XQVPHv8BghWVrZXXO2U9Qr/TK7XngiRVfkZ/rGi+7p6b0bIFn6xpm1XynqGX6zpuZWykK6opK06QnCJxL42zZS1hj+sa91MWSgGiRSJDPMHJTHGUJ3TqtrvkKpIKRRAlvADGS0RIQQjBDcx0NGCVduJEJl1FoAACAQgAAIBCIBAAAIgEIAACDan6CgX17LQIpWO5E0OOfxAK0JO8AMZnRAhxCKkvusEKy0aayxW35eFKCEQHeKlBpLCH9aVNoEc4Q/rOqrCUM4huFnOvpo3W8uHRQ7wiTUduh7Y+Qu/WNPV93ikjVC6akWI/ME7fDO53pvdgfBYtH19eiwajQOsF4OfGwd09cv6Az9Npi++RvMZe/oY2HxG6jf8ZVydPkYDMztK+xqYocUfgZXVCHl5qBeBQ8X6hTax0+rWNrHyF9/gR21609RuHK3GCbUav6YuNOO/qSIf1owfx1VMM2/oPq7iCgUHuozXqANdfjKf7DAf4BwqwAAUnGUIGIDiHYzm6guHExNb3eH4boLCAfdUwWw9T2FndXqdS5LREvm5n1G6fPlI7DyK7WDnQSRqF9UXyeVx4SCIgtBy1hiYzJHVk88gOlNZRHSO2ATzlZz8RdTEFiHE6j1Yn6wZPTjyXrC1Gk1Vv2J/Ig2qx8hSjcdq+wakE1CobKnGxQhQudqxE+NJjTklAG39E2AAt17cXBHJnnMAAAAASUVORK5CYII=) no-repeat 25px 50px;
}
Background-blend-mode Test - Script Codes
Background-blend-mode Test - Script Codes
Home Page Home
Developer Oliver Kühn
Username 0x04
Uploaded November 15, 2022
Rating 3
Size 4,744 Kb
Views 14,168
Do you need developer help for Background-blend-mode Test?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Oliver Kühn (0x04) Script Codes
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!