Using a negative mask in CSS when overlaying a background image

Looking to create a unique mask in CSS using a PNG file, but with a twist. Rather than displaying the content underneath, I want the mask to cut out that content and display everything else around it - almost like a negative mask effect. The key requirement here is that I need to apply this mask to a background image. Here's what I have in mind:

https://i.sstatic.net/O1thO.png

Imagine a scenario with 3 layers: A video (HTML), a dotted background created using CSS, and a png image serving as the mask (which will act as the logo). What I aim to achieve is for the mask to eliminate the background it covers and showcase the video beneath.

.cont {
        width: 100%;
        height: 450px;
        position: relative;
        background: url("http://www.kamiennadlyna.pl/test/img/video-bg.jpg") no-repeat center;
      }

      .maska {
        width: 100%;
        height: 100%;
        background: url("http://www.kamiennadlyna.pl/test/img/mask.png") repeat;
        left: 0;
        bottom: 0;
        position: absolute;
        text-align: center;
      }
<div class="cont">

        <video autoplay muted loop id="myVideo">
          <source src="http://www.kamiennadlyna.pl/video.mp4" type="video/mp4" poster="http://www.kamiennadlyna.pl/test/img/video-bg.jpg">
        </video>

        <div class="maska">
        </div>

      </div>

Check out the live demo on jsfiddle!

htmlcsscss-mask

Answer №1

Unique Answer

After reviewing the latest update, here is a new approach you can take. Try creating an inverted version of your logo where the transparent part becomes solid and vice versa. Then, use multiple mask layers to achieve the desired effect.

I have centered the logo on the overlay following the same concept as before:

.overlay {
  --h:200px; /* height of the logo*/
  --w:200px; /* width of the logo */

  height:300px;
  background:radial-gradient(farthest-side,black 50%,transparent 52%) 0 0/8px 8px;

  -webkit-mask:
      linear-gradient(#fff,#fff) top   /100% calc(50% - var(--h)/2),
      linear-gradient(#fff,#fff) bottom/100% calc(50% - var(--h)/2),
      linear-gradient(#fff,#fff) left  /calc(50.1% - var(--w)/2) 100%,
      linear-gradient(#fff,#fff) right /calc(50.1% - var(--w)/2) 100%,
      url(https://i.ibb.co/1zDbtJw/logo.png) center/var(--w) var(--h);
  mask:
      linear-gradient(#fff,#fff) top   /100% calc(50% - var(--h)/2),
      linear-gradient(#fff,#fff) bottom/100% calc(50% - var(--h)/2),
      linear-gradient(#fff,#fff) left  /calc(50% - var(--w)/2) 100%,
      linear-gradient(#fff,#fff) right /calc(50% - var(--w)/2) 100%,
      url(https://i.ibb.co/1zDbtJw/logo.png) center/var(--w) var(--h);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}

body {
  background:url(https://i.picsum.photos/id/44/800/800.jpg) center/cover;
}
<div class="overlay"></div>

For a detailed explanation and demonstration on how to create a new version of the logo, refer to this related question:

You can also experiment with using `mask-composite` to maintain the original logo while making it easier to adjust and reposition. Note the importance of layer order in this example compared to the previous method:

.overlay {

  height:300px;
  background:radial-gradient(farthest-side,black 50%,transparent 52%) 0 0/8px 8px;

  -webkit-mask:
      linear-gradient(#fff,#fff),
      url(https://i.ibb.co/cKBT5WQ/logo.png) center/200px 200px;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-composite:source-out;
  mask:
      linear-gradient(#fff,#fff),
      url(https://i.ibb.co/cKBT5WQ/logo.png) center/200px 200px;
  mask-repeat:no-repeat;
  mask-composite:exclude;
}

body {
  background:url(https://i.picsum.photos/id/44/800/800.jpg) center/cover;
}
<div class="overlay"></div>


Original Approach

To achieve the desired design without relying on images, I suggest using pure CSS:

.overlay {
  height:300px;
  /* stripes */
  background:repeating-linear-gradient(to right,blue 0 10px,transparent 10px 20px);
  /* mask */
  -webkit-mask:
      linear-gradient(#fff,#fff) top   /100% 50px,
      linear-gradient(#fff,#fff) bottom/100% 50px,
      linear-gradient( 235deg,transparent 10%,#fff 9%) calc(50% - 600px) 50%/1200px calc(100% - 100px),
      linear-gradient(-235deg,transparent 10%,#fff 9%) calc(50% + 600px) 50%/1200px calc(100% - 100px);
  -webkit-mask-repeat:no-repeat;
  mask:
      linear-gradient(#fff,#fff) top   /100% 50px,
      linear-gradient(#fff,#fff) bottom/100% 50px,
      linear-gradient( 235deg,transparent 10%,#fff 9%) calc(50% - 600px) 50%/1200px calc(100% - 100px),
      linear-gradient(-235deg,transparent 10%,#fff 9%) calc(50% + 600px) 50%/1200px calc(100% - 100px);
  mask-repeat:no-repeat;
}

body {
  background:url(https://i.picsum.photos/id/44/800/800.jpg) center/cover;
}
<div class="overlay"></div>

Below is the gradient used for the mask with various color combinations to illustrate the puzzle visually:

.overlay {
  height:300px;
  background:
      linear-gradient(blue,blue) top   /100% 50px,
      linear-gradient(red,red)   bottom/100% 50px,
      linear-gradient( 235deg,transparent 10%,green  9%) 
         calc(50% - 600px)   50%  /    1200px calc(100% - 100px),
      linear-gradient(-235deg,transparent 10%,purple 9%) 
         calc(50% + 600px) 50%/1200px calc(100% - 100px);
  background-repeat:no-repeat;
}

body {
  background:url(https://i.picsum.photos/id/44/800/800.jpg) center/cover;
}
<div class="overlay"></div>

Here's another syntax that utilizes CSS variables for easy triangle control:

.overlay {
  --h:200px; /* height of the triangle*/
  --w:200px; /* width of the triangle */

  height:300px;
  /* stripes */
  background:repeating-linear-gradient(to right,blue 0 10px,transparent 10px 20px);
  /* mask */
  -webkit-mask:
      linear-gradient(#fff,#fff) top   /100% calc(50% - var(--h)/2),
      linear-gradient(#fff,#fff) bottom/100% calc(50% - var(--h)/2),
      linear-gradient(#fff,#fff) left  /calc(50% - var(--w)/2) 100%,
      linear-gradient(#fff,#fff) right /calc(50% - var(--w)/2) 100%,
      linear-gradient(to top right,#fff 49%,transparent 50%) calc(50% - var(--w)/4) 50%/calc(var(--w)/2) var(--h),
      linear-gradient(to top left ,#fff 49%,transparent 50%) calc(50% + var(--w)/4) 50%/calc(var(--w)/2) var(--h);
  -webkit-mask-repeat:no-repeat;
  mask:
      linear-gradient(#fff,#fff) top   /100% calc(50% - var(--h)/2),
      linear-gradient(#fff,#fff) bottom/100% calc(50% - var(--h)/2),
      linear-gradient(#fff,#fff) left  /calc(50% - var(--w)/2) 100%,
      linear-gradient(#fff,#fff) right /calc(50% - var(--w)/2) 100%,
      linear-gradient(to top right,#fff 49%,transparent 50%) calc(50% - var(--w)/4) 50%/calc(var(--w)/2) var(--h),
      linear-gradient(to top left ,#fff 49%,transparent 50%) calc(50% + var(--w)/4) 50%/calc(var(--w)/2) var(--h);
  mask-repeat:no-repeat;
}

body {
  background:url(https://i.picsum.photos/id/44/800/800.jpg) center/cover;
}
<div class="overlay"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to obtain the current cursor location in draft.js?

As part of my draftjs project, I'm working on implementing a feature that allows users to easily insert links. One approach I've taken is creating a popup that appears when the shortcut cmk + k is pressed. To enhance the user experience, I am cu ...

javascripthtmlreactjsnext.jsdraftjs

iPhone: Fixed position div disappearing

Currently, I am working on creating a mobile menu for my Joomla 3 site located at . The menu is functioning correctly on desktops, however, when attempting to view it on my iPhone, the menu slides in but remains invisible. Despite this, I can still tap on ...

javascripthtmlioscssmobile-safari

Increase the size of the Iframe tag to a larger scale

Can someone help me figure out how to make my iframe content fill the entire screen? Any assistance would be greatly appreciated. Photos: Current Output: Desired Output <!DOCTYPE html> <html lang="en"> ...

htmlcssiframe

Creating a compact Swiper slider: reducing image size without sacrificing full window coverage!

Utilizing Swiper to craft a slider that occupies the entire window, with a slight margin for a bar-- no issues there. (https://i.sstatic.net/qcGBA.jpg) However, the image I placed in for the slide () appears to be excessively enlarged. Is there a way to ...

javascripthtmlcsssliderswiper.js

Transferring information between pop-up and webpage

I have developed a simple form within an ERP system that allows users to create quick support tickets. However, instead of manually inputting the client ID in the form, I want to provide them with a more user-friendly option. My idea is to include a search ...

javascriptjqueryhtmllaravelpopup

Utilize ASP to limit the application of a CSS file exclusively to the child page

My website consists of a master page and several child pages. I have created specific CSS classes for styling. However, I only want certain child pages to utilize these styles while the master page should always use them. How can I limit the access to th ...

.netcss

iPhone has trouble accessing alternative forms of content

<object width="300" height="100" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"> <param value="5352f5c8e96c251fb9d79890f2294608.swf" name="movie"> <!--[if !IE]>--> <object width="300" height="100" data="5352f5c8e96 ...

iphonehtmlflashios

Hover over the text only, not the entire row

Is there a way to create a mouse hover effect on text only, without affecting the entire row? I attempted using Position(), but didn't have success. Here is a link to the fiddle I created: <ul id='ulid'> <li>Task1</li> < ...

javascriptjqueryhtmlcss

Turn off the ability to view the content of .css and .js files within the browser

Earlier, I inquired about how to disable file and folder listing and discovered that it can be achieved using a file named .htaccess. To disable folder listing, I entered Options -Indexes in the .htaccess file located in the parent folder. Additionally, to ...

javascriptcss.htaccess

How to create a scrollable card within a div using bootstrap

How do I create a scrollable card in Bootstrap 4 with this specific HTML structure: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSA ...

htmlcssbootstrap-4

The navigation bar triggers the opening of all icon menus in their designated positions at the same time

This code snippet represents the navigation bar for an admin user, featuring 3 icons: navigation menu, user menu, and manage button icons. The problem arises when clicking on any of these icons, as all dropdown items from each icon are displayed in their ...

htmlreactjsmaterial-uinavbar

Having issues with Bootstrap 4's bg-inverse not displaying correctly?

While attempting to replicate the navbar example from Bootstrap's documentation, I encountered an issue where the background color of the navbar was not loading properly. <nav class="navbar navbar-inverse bg-inverse"> <a class="navbar-br ...

cssbootstrap-4

Printing content from a web page using window.print() function in a form using javascript and angular

Within my HTML code lies a form, complete with a variety of fields: <div class="card-body" id="print"> <form [formGroup]="form"> <div class="text-muted" *ngFor=" ...

javascripthtmlcssangularprinting

Why does the layout shift occur when setting the width of a block element in percentages or pixels?

I recently created a basic HTML layout; <div style="float:left;width:100px;background-color:red">RED</div> <div style="background-color:blue">BLUE</div> What I noticed is that when the width of the second DIV is not set or is set ...

csscss-float

What is the proper way to convert the Vue3 ::v-deep SASS syntax to utilize :deep?

HTML: <template> <form class="bg-white"> <div class="source-field"> ... The original SASS code looks like this: .form::v-deep .source-field width: 129px display: inline-block margin: 0px 2px 5px 2px ...

cssvue.jssassvuejs3

Is there a way to use Jquery to determine if a parent div contains a scroll

I'm trying to find a jQuery example that checks if any parent div has a scroll bar, but I can't seem to locate a helpful one. Here is the code snippet I am working with: <div> <div class="heading"> <div class="visit ...

javascriptjqueryhtmlcss

What causes the menu icon to shift to the left upon clicking it?

I'm currently working on a website project that involves implementing a fixed navbar with jQuery sliding animation for the menu. However, I've encountered an issue where the "menu_icon" is getting pushed to the left every time the menu slides dow ...

javascriptjqueryhtmlcss

What is the best way to implement this design using CSS or JavaScript?

I would like to enhance the appearance of my school website during these challenging times of the pandemic by adding some CSS or JavaScript elements. However, I am unsure how to go about it. ...

javascripthtmljquerycssvue.js

Adding ids dynamically to href elements in Vue.js

As a newcomer, I am facing an issue with dynamically adding an id to my href tag. Below is the code snippet: <div class="col-md-6" v-for="Product in data"> <div class="panel panel-default" > <div class="panel-heading"> ...

htmlcssvue.jsbootstrap-4

Issues with PHP code not displaying properly in HTML email design

I am struggling to understand why some of my PHP code is not rendering correctly in an HTML email that I am working on. The following is an excerpt from the code (with most of the HTML elements removed): $messaget = " <html> <head> <title&g ...

phphtmlemail