Monochrome backdrop with colorful elements

Experimented with a new technique

<div class="grayscale"><span style="color:red">Red Text</span>

 .grayscale {
     background: url(yourimagehere.jpg);
     -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
     -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
     -webkit-filter: grayscale(100%);
     filter: gray;
     filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
 }

This method successfully greys out the background image, but it also applies the effect to all elements within the box. Is there a way to only grey out the background while keeping the contents in full color? Thank you for any assistance!

Link to demonstration

htmlcss

Answer №1

Yes, it is possible to apply a filter to a background image here.

To achieve this effect, you can use the background image as the :before element in CSS, ensuring that the greyscale filter will not affect any children elements.

Here's an example of how you can implement this:

<div class="module">
  <div class="module-inside">
    Module
  </div>
</div>

In your CSS stylesheet, you can define the styles like so:

body {
  height: 100vh;
  padding: 0;
  display: grid;
  align-content: center;
  justify-content: center;
}
.module {
  width: 300px;
  height: 300px;
  display: grid;
  place-items: center;
  color: #ff43ea;
  position: relative;
}
.module::before {
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: url(https://images.unsplash.com/photo-1494645009625-cc17363a5f20?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=bd502af39c922553e5a13624d4f44f40);
  background-size: cover;
  filter: grayscale(100%);
}
.module-inside {
  position: relative;
  font: bold 42px sans-serif;
}

You can view a working example here.

Answer №2

To achieve the greyscale effect, we are applying it to the entire div with the class greyscale. This indicates that all elements within the div will be affected. As a solution, you should extract your content (the span) from the greyscale div and utilize css positioning to superimpose the content on the image.

Answer №3

It's similar to what was mentioned by @chris. Referenced from http://dev.w3.org/fxtf/filters/:

When a computed value other than none is used, it triggers the creation of a stacking context [CSS21] in a manner similar to CSS opacity. All descendants of the element are grouped together and rendered with the filter effect applied to the group as a whole.

One option is to extract the text out of the div and position it absolutely.

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

Creating a sleek Bootstrap inline form featuring two input fields with minimal spacing between them

I am working on a form using twitter-bootstrap with two inline input fields nested in two columns. I want to remove the padding between these inputs to achieve a specific layout. Here is an example of how I want my form to look: https://i.sstatic.net/aSh ...

htmlcsstwitter-bootstrap

Adjusting the grid for various mobile screen sizes

I am currently working on designing a user interface (UI) for mobile screens that includes a header, grid, and buttons. I want the UI to look consistent across all mobile devices. Here are screenshots from various mobile screens: Samsung S5 Pixel 2 XL I ...

htmlcss

When JSON data is displayed in an HTML table, it mysteriously duplicates

I was able to retrieve the data using this code, but I am encountering an issue where the data is being displayed multiple times for certain entries. For example, "tom" might appear as tom, tom, tom... <div class="row"> <div class="col-12"> ...

htmljsonajaxhtml-table

Spring Boot - delivering unadulterated HTML and static materials

After spending countless hours working on this, I am still unable to figure out how to serve pure .html pages. The project I am referring to can be found at: https://github.com/robson021/Invoice-Writer Although the Thymeleaf engine works perfectly, I enco ...

javahtmlspringspring-mvcconfiguration

Displaying JSON data in HTML proves to be a challenge

I have collected JSON data and organized it into two arrays, then displayed it in JSON format. Now I'm trying to showcase this data in HTML using two loops by correlating the IDs of one array with the userIds of another array. {"personaldetails":[{"i ...

javascriptphpjqueryhtmljson

Is there a way to identify when a radio button's value has changed without having to submit the form again?

Within this form, I have 2 radio buttons: <form action='' method='post' onsubmit='return checkForm(this, event)'> <input type = 'radio' name='allow' value='allow' checked>Allow ...

javascripthtmlcssradio-buttonforms

The data retrieved from the API call is outdated

I am struggling with a weather web API that is only showing old data when called in the code. However, when I enter the API URL directly into the browser, it displays the most up-to-date information for the current city. Can anyone help me troubleshoot why ...

javascriptjqueryhtmlajaxapi

Looking for CSS templates for improving your business web apps?

Many CSS templates out there are fixed-width, typically around 900 pixels wide... Right now, I'm in the process of creating an intranet Rails application and I'm seeking a good resource for CSS templates designed specifically for business applic ...

ruby-on-railscss

Creating a sleek and stylish panel with a static horizontal table size in Bootstrap 3.0

I'm having trouble with the nested table staying a static large size while the panel decreases as I resize my browser. Any tips on how to fix this? <div class="panel panel-primary"> <table class="table"> ... Here is an exampl ...

htmltwitter-bootstraptwitter-bootstrap-3html-table

Focusing in on a PARTICULAR SECTION of the picture

My website has a unique concept - comparing two articles side by side. One of the articles is mine, while the other is displayed alongside it. To capture entire pages for comparison, I utilize Google's GoFullPage feature to take screenshots. The goa ...

javascripthtmlcss

Create a responsive layout using Bootstrap that features three columns with images that are dynamically inserted

My desired outcome is as follows: https://i.sstatic.net/9EKkS.png However, this is the output I am currently getting: https://i.sstatic.net/bVHhR.png The image and text are pulled from the database. Here is the code snippet: <div class="row&quo ...

phpcssbootstrap-4flexboxlaravel-blade

What is the process for inserting images into SQL Server using PHP?

I'm currently working on a form that allows users to upload multiple images. Despite the code working and successfully adding the images to the "images-design" folder, I am facing an issue where the names of the pictures are not being added to the da ...

phphtmlsql-serverdatabasefile-upload

Is there a way to insert a colored square into a <button> tag rather than text?

Looking for help with the following HTML: <button name="darkBlue" onclick="setThemeColor(this.name)">Blue</button> <button name="black" onclick="setThemeColor(this.name)">Black</button> I'm interested in replacing the text on ...

htmlcss

Disabling dates if a specific store is selected

I have been tasked with modifying an order form to prevent users from selecting Sundays for delivery if a certain shop is chosen. I believe using a script that triggers an alert message would be the best approach. However, my current script does not seem t ...

javascripthtml

Disabling Sidebars on Blog Articles Exclusively for Mobile Devices

I own the website Onthecomeupartists.com and am currently using the Impreza Theme 2.10 on WordPress 4.5.2. However, I want to enhance the mobile compatibility of my site by removing the sidebar on blog posts when viewed on mobile devices only, while keepin ...

htmlcsswordpress

Retrieving radio button value in Angular 2

Currently, I am attempting to retrieve the radio button value in an Angular 2 project. The radio buttons are defined in index.html as: <input type="radio" id="options1" name="function" value="create"> <input type="radio" id="options2" name="func ...

javascripthtmltemplatesangular

Adjusting the height of a DIV element as the user scrolls

I have successfully minimized my navigation bar once the user scrolls past the header. However, I need advice on handling the line height of the elements as the div shrinks. Additionally, there is an issue where the navigation bar glitches and remains shru ...

javascriptjqueryhtmlcss

Are browser zoom and screen size variations equivalent in terms of impact on display?

I am curious about ensuring my website is responsive on all screen sizes. Is resizing the browser window equivalent to viewing my website on various devices with different screen sizes? I have observed that my webpage appears well on larger screens, but w ...

htmlcssnode.jsangular

How to Prompt CSS Rule Evaluation to Ensure Proper Functionality (Solution)

When encountering the issue of browsers, specifically Internet Explorer in my case, failing to correctly implement complex CSS rules, is there a way to force the evaluation? For example: body[data-some-flag="3"] #someElement .someClass svg stop:first-chi ...

css

Tips on eliminating the header section in SlickGrid?

Is there a way to remove the header row in SlickGrid using CSS? I know there isn't an API for it, but maybe some CSS tricks can do the job. Any suggestions? Check out this example: Calling all CSS experts! I'm looking for assistance in modifyin ...

htmlcssslickgrid