Menu
Please see the following picture:
Why is padding-top and margin-top fully opaque, but padding-right etc. not?
505
Image Transparency with the CSS Opacity Property The opacity property takes values from 0.0 to 1.0 , with 1 being the default value for all elements. The lower the value, the more transparent. So if an element is given an opacity of 0 , it would be invisible.
The opacity CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.
The opacity property specifies the opacity/transparency of an element.
To set the opacity of a background, image, text, or other element, you can use the CSS opacity property. Values for this property range from 0 to 1. If you set the property to 0, the styled element will be completely transparent (ie. invisible).
I believe they are semi-transparent because they're not explicitly defined.
Consired following sheet:
selector1 {
margin: 20px;
}
selector2 {
margin: 20px;
margin-top: 10px;
}
selector3 {
margin: 10px 20px 30px;
}
In first example (selector1) all margin-* properties will be semi-transparent because non is explicitly defined - shortcut is being used.
In second example (selector2) only margin-top will be fully opaque, as it's defined in its own property.
In last example (selector3), margin-top and margin-bottom are defined explicitly, therefore the will be fully opaque. However margin-left and margin-right are defined by a single value, so they will be semi-transparent.
Semi-transparent color is also applied to default values, for instance:
background: red url(...) no-repeat;
This property defined background-color, background-image and background-repeat explicitly, however background-position, background-clip, background-size etc. are not defined (default values are used) so they will be seen as semi-transparent.
97
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
