skip to Main Content

I want to change the opacity of an inputs backgroundColor to 0.5 while keeping the text of the input at 1. When I change the opacity of the background it also changes the text. How do I change only the backgrounds opacity without affecting the text?

import { useState } from 'react';
import CalculateDiscount from '../calculate-discount/CalculateDiscount';


const Discount = () => {

   const [price, setPrice] = useState(0);
   const [discount, setDiscount] = useState(0);

   return (
       <View style={styles.container}>
           <TextInput style={styles.input}
               placeholder='enter price'
               keyboardType='numeric'
               value={price}
               onChangeText={(value) => setPrice(value)}
           />
           <TextInput style={styles.input}
               placeholder='enter discount %'
               keyboardType='numeric'
               value={discount}
               onChangeText={(value) => setDiscount(value)}
           />

           <CalculateDiscount price={price} discount={discount}/>
       </View>
   )
}

const styles = StyleSheet.create({
   container: {
       height: '100%',
       backgroundColor: '#F1F6FA',
   },

   input: {
       width: '90%',
       alignSelf: 'center',
       marginTop: 20,
       height: 80,
       borderRadius: 30,
       borderWidth: 1,
       textAlign: 'center',
       backgroundColor: '#90B0DD',
       fontSize: 26,
       fontWeight: 'bold',
       
   },

})

export default Discount;

2

Answers


  1. Use rgba(red, Green, blue, alpha):

    backgroundColor: 'rgba(144,176,221,0.5)'
    

    You can adjust the opacity/alpha by tweaking last parameter passed to rgba method.

    Login or Signup to reply.
  2. You can modify your existing hexadecimal colour, to take advantage of the contemporary availability of transparency, from:

    #rrggbb
    

    to:

    #rrggbbaa
    

    In your case we’d amend:

    backgroundColor: '#90B0DD'
    

    to, as an example:

    backgroundColor: '#90B077';
    
    table {
      caption-side: bottom;
      inline-size: clamp(30rem, 60%, 1000px);
      margin-inline: auto;
    }
    
    caption {
      background-color: #ffa8;
    }
    
    td {
      border: 1px solid currentColor;
    }
    
    td:first-child {
      letter-spacing: 0.1em;
      font-family: monospace;
      font-size: 1.2rem;
      font-weight: 700;
      text-transform: uppercase;
    }
    <table>
      <caption>
        Note that as the opacity of the color increases (from 00 to ff) in line with the number
      </caption>
      <thead>
        <tr>
          <th>Hex color code:</th>
          <th>resulting color:</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>#ff000000</td>
          <td style="background-color: rgba(255, 0, 0, 0);"></td>
        </tr>
        <tr>
          <td>#ff000011</td>
          <td style="background-color: rgba(255, 0, 0, 0.067);"></td>
        </tr>
        <tr>
          <td>#ff000022</td>
          <td style="background-color: rgba(255, 0, 0, 0.133);"></td>
        </tr>
        <tr>
          <td>#ff000033</td>
          <td style="background-color: rgba(255, 0, 0, 0.2);"></td>
        </tr>
        <tr>
          <td>#ff000044</td>
          <td style="background-color: rgba(255, 0, 0, 0.267);"></td>
        </tr>
        <tr>
          <td>#ff000055</td>
          <td style="background-color: rgba(255, 0, 0, 0.333);"></td>
        </tr>
        <tr>
          <td>#ff000066</td>
          <td style="background-color: rgba(255, 0, 0, 0.4);"></td>
        </tr>
        <tr>
          <td>#ff000077</td>
          <td style="background-color: rgba(255, 0, 0, 0.467);"></td>
        </tr>
        <tr>
          <td>#ff000088</td>
          <td style="background-color: rgba(255, 0, 0, 0.533);"></td>
        </tr>
        <tr>
          <td>#ff000099</td>
          <td style="background-color: rgba(255, 0, 0, 0.6);"></td>
        </tr>
        <tr>
          <td>#ff0000aa</td>
          <td style="background-color: rgba(255, 0, 0, 0.667);"></td>
        </tr>
        <tr>
          <td>#ff0000bb</td>
          <td style="background-color: rgba(255, 0, 0, 0.733);"></td>
        </tr>
        <tr>
          <td>#ff0000cc</td>
          <td style="background-color: rgba(255, 0, 0, 0.8);"></td>
        </tr>
        <tr>
          <td>#ff0000dd</td>
          <td style="background-color: rgba(255, 0, 0, 0.867);"></td>
        </tr>
        <tr>
          <td>#ff0000ee</td>
          <td style="background-color: rgba(255, 0, 0, 0.933);"></td>
        </tr>
        <tr>
          <td>#ff0000ff</td>
          <td style="background-color: rgb(255, 0, 0);"></td>
        </tr>
      </tbody>
    </table>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search