如何降低顺风css背景图像的不透明度？

Question

​

​

我在顺风CSS中使用flex来设计上面的部分。我已经放置了一个反应标志的背景图像在这一部分。我试图通过“不透明度-25”级的顺风来改变背景图像的不透明度，但是它改变了整个部分的不透明度。请为这个问题提出一个可行的解决办法。

注：线性梯度不适用于这里，因为它将应用于整个页脚并影响整个背景。我只想改变反应标志的不透明度。我使用自定义类作为“基础”。这里的“基础- 40%”指的是40%的柱子宽度。

<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>

我的tailwind.config.js看起来是：

/** @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: [],
}

Answer 1

虽然我从来没有使用过顺风类库，但我怀疑css覆盖不透明度的方式可以实现css中的任何其他值。在初始化序列中的较高级别定义选择器类，指定属性和新值，并告诉解释器这是一个重要的更改。

这里的关键是在新值之后使用的保留字“重要”。这是通过在hte行的末尾写一个空格来完成的。关于如何！重要作品的更多信息，请访问以下网站：

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