3

Background image opacity

I'm using flex in tailwind CSS to design the above section. I have placed a background image of React logo in this section. I've tried to change the opacity of the background image through the "opacity-25" class of tailwind but it changes the opacity of the whole section. Please suggest me a feasible solution for this problem.

Note: Linear gradient isn't applicable here as it will be applied to the whole footer and affect the entire background. I just want to change the opacity of React Logo. I'm using custom classes for "basis". Here "basis-40%" means 40% width of the column.

<div class="flex">  
    <!-- First col  -->
    <div class="flex flex-col basis-40% border-solid border-green-900">
      <div class="flex">
        <img class="w-32 h-22" src="https://cdn.dribbble.com/users/7338576/screenshots/15684153/media/a52985d53636f23a01bed622925099c3.jpg?compress=1&resize=400x300">
        <div class="ml-12 flex flex-col">
          <div class="flex items-center">
            <svg class="w-6 h-6 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
              <path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-.53 14.03a.75.75 0 001.06 0l3-3a.75.75 0 10-1.06-1.06l-1.72 1.72V8.25a.75.75 0 00-1.5 0v5.69l-1.72-1.72a.75.75 0 00-1.06 1.06l3 3z" clip-rule="evenodd" />
            </svg>
            <p class="text-phone-number-color text-lg font-bold tracking-27">0330 057 9957</p>
          </div>
          <p class="text-email-color my-3 text-lg font-semibold tracking-27">info@aidhumanity.co.uk</p>
          <div class="flex">
            <svg class="w-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
              <path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-.53 14.03a.75.75 0 001.06 0l3-3a.75.75 0 10-1.06-1.06l-1.72 1.72V8.25a.75.75 0 00-1.5 0v5.69l-1.72-1.72a.75.75 0 00-1.06 1.06l3 3z" clip-rule="evenodd" />
            </svg>
            <svg class="w-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
              <path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-.53 14.03a.75.75 0 001.06 0l3-3a.75.75 0 10-1.06-1.06l-1.72 1.72V8.25a.75.75 0 00-1.5 0v5.69l-1.72-1.72a.75.75 0 00-1.06 1.06l3 3z" clip-rule="evenodd" />
            </svg>
            <svg class="w-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
              <path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-.53 14.03a.75.75 0 001.06 0l3-3a.75.75 0 10-1.06-1.06l-1.72 1.72V8.25a.75.75 0 00-1.5 0v5.69l-1.72-1.72a.75.75 0 00-1.06 1.06l3 3z" clip-rule="evenodd" />
            </svg>
            <svg class="w-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
              <path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-.53 14.03a.75.75 0 001.06 0l3-3a.75.75 0 10-1.06-1.06l-1.72 1.72V8.25a.75.75 0 00-1.5 0v5.69l-1.72-1.72a.75.75 0 00-1.06 1.06l3 3z" clip-rule="evenodd" />
            </svg>
          </div>
        </div>
      </div>
      <p class="text-footer-links-color text-base font-medium leading-26 tracking-24 mt-12">Aid Humanity is proud to be a non-profit organization that passes 100% of our donations to charitable causes around the world.</p>
    </div> 

    <!-- Second column -->
    <div class="flex flex-col basis-10% border-solid border-orange-900 ml-28">
      <span class="mb-3 font-semibold text-sm tracking-21">ABOUT US</span> 
      <div class="text-footer-links-color flex flex-col text-base font-medium leading-30 tracking-24">
        <a class="link link-hover">Our Story</a> 
        <a class="link link-hover mt-1">Marketing</a> 
        <a class="link link-hover mt-1">Blog</a>
        <a class="link link-hover mt-1">Zakat</a> 
        <a class="link link-hover mt-1 ">Get Involved</a> 
        <a class="link link-hover mt-1">Contact</a> 
        <a class="link link-hover mt-1 btn-primary">Donate</a>
      </div> 
    </div> 

    <!-- Third column -->
    <div class="flex flex-col basis-20% border-solidborder-2 border-orange-900 ml-28">
      <span class="mb-3 text-link-heading-color font-semibold text-sm tracking-21">APPEALS</span>
      <div class="text-footer-links-color flex flex-col text-base font-medium leading-30 tracking-24"> 
        <a class="link link-hover mt-1">Build a Mosque</a> 
        <a class="link link-hover mt-1">Disaster & Emergency</a> 
        <a class="link link-hover mt-1">Appeals</a> 
        <a class="link link-hover mt-1">Water For All</a>
        <a class="link link-hover mt-1">Sponsor an Orphan</a> 
        <a class="link link-hover mt-1">Hunger Appeal</a>
      </div> 
    </div>

    <!-- Fourth colmn -->
    <div class="flex flex-col basis-10% border-solid border-yellow-900 ml-12">
      <span class="mb-3 text-link-heading-color font-semibold text-sm tracking-21">NEWSLETTER</span> 
      <span class="label-text font-bold text-lg leading-28 tracking-45">Subscribe to the free newsletter and stay up-to date</span>
      <div class="flex justify-center mt-5">
        <div class="mb-3 xl:w-96">
          <div class="input-group relative flex flex-wrap items-stretch w-full mb-4">
            <input type="search" class="form-control relative min-w-0 block px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded-lg transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" placeholder="Your email" aria-label="Search" aria-describedby="button-addon2">
            <button class="btn px-3 ml-2 py-2.5 bg-sky-400 text-white font-medium text-xs leading-tight uppercase rounded-lg shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700  focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out flex items-center" type="button" id="button-addon2">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div> 
  </div>

And my tailwind.config.js looks like:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        "footer-links-color": "#8892AC",
        "footer-background": "#102558",
        "phone-number-color": "#00ADE9",
        "email-color": "#FFC100",
        "link-heading-color": "#FFFFFF"
      },
      fontFamily: {
        "montserrat": "Montserrat"
      },
      lineHeight: {
        '30': '30px',
        '28': '28px',
        '26': '26px',
      },
      letterSpacing: {
      '06': '-.06',
      '6': '-.6',
      '9': '-.9',
      '21': '-.21px',
      '24': '-.24px',
      '27': '-.27px',
      '45': '-.45px',
      },
      flexBasis: {
        '10%': '10%',
        '15%': '15%',
        '20%': '20%',
        '30%': '30%',
        '35%': '35%',
        '40%': '40%',
        '50%': '50%',
        '60%': '60%',
        '70%': '70%',
      }
    },
  },
  plugins: [],
}
Fuaad
  • 197
  • 15
  • Can you please include your config so we can also see the custom utilities? Maybe create a Minimal, Reproducible Example using tailwind-play? https://play.tailwindcss.com/ – ChenBr Oct 23 '22 at 13:34
  • Does [this](https://stackoverflow.com/a/64667373/14170686) answer your question? – anotherOne Oct 23 '22 at 14:19

1 Answers1

-3

Although I have never used the tailwind class library, I suspect the css to override the opacity can be done the same way overriding any other value in css can be achieved. Define the selector class at a higher level in the initialization sequence, specify the property and new value and tell the interpreter that it is an important change.

The key takeaway here is the reserved word important which is applied after the new value. This is done by writing a space !important at the end of hte line. More about how !important works can be found at the following website:

https://developer.mozilla.org/en-US/docs/Web/CSS/important

Harvey Mushman
  • 615
  • 1
  • 11
  • 23