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
Use rgba(red, Green, blue, alpha):
You can adjust the opacity/alpha by tweaking last parameter passed to rgba method.
You can modify your existing hexadecimal colour, to take advantage of the contemporary availability of transparency, from:
to:
In your case we’d amend:
to, as an example: