Please see the following picture:
Why is padding-top and margin-top fully opaque, but padding-right etc. not?
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.
Grey colored entries are rules that are not defined but instead computed at runtime. Please refer this page
Related
There are two CSS statements but different sequence order in declaration.
.wrap {
background-color: rgba(255, 255, 255, 0.4);
min-height:600px;
background: url('/images/bg.jpg');
background-size: cover;
max-width: 100%;
}
and
.wrap {
background: url('/images/bg.jpg');
background-size: cover;
max-width: 100%;
background-color: rgba(255, 255, 255, 0.4);
min-height:600px;
}
The difference is just the sequence order of the element between background: url() and background-color, if background: url() is declared after the background-color and there is no image can be loaded, then the background-color cannot become effective. It seems the background: url() override the background-color.
Demo can be found from http://jsfiddle.net/yckelvin/ctgc8xzL/
Is there any definition to the CSS syntax about the element sequence order in declaration? I read the w3schools.com but no such information.
When you use the shortcut background property, any unspecified background properties such as background-color are set to the initial default value.
So if the background property is declared after background-color without specifying
a color, then the background color takes on the initial value of transparent.
This is part of the CSS specification:
http://www.w3.org/TR/css3-background/#the-background
CSS is short for Cascading Style Sheets (emphasis mine). This means that selectors and properties listed later will override selectors/properties that came before.
Think of it as if someone tells you "go left, and then right. Wait; nevermind. Go right, and then right again". You would follow the second set of instructions, rather than the first. CSS works the same way.
So with the following CSS:
div {
color: green;
color: red;
}
The color: red; will be applied, whereas color: green; will be overridden.
Usually, there is no requirement to order certain properties certain ways; you can put width before height or vice versa, and you could put background: url() after background-color. No big deal; the CSS will be applied the same way.
On a slightly different note, there are some selectors that require a particular ordering. That is, a:link, a:visited, a:hover, a:active should be placed in that order to avoid specificity problems.
background is just a short-hand for a multiple of attributes
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
What you want is to set
background-image: url() seperately. or just use the combined one for all your values.
The cascading rules of CSS specify that other things being equal, the latter of two conflicting declarations wins. And here other things are equal, since the declarations for background and background-color appear within the same rule, so they have the same status (same source, same importance, same specificity).
The declarations are in conflict, since they both set the background color. The reason as that the background shorthand property always sets all background properties. When the background color is not specified when using the shorthand, it is set to the initial value, transparent (which, when it takes effect, means that the background of the enclosing element shines through).
Thus, although the first version of the code is valid, too, it is pointless in the sense that the background-color declaration cannot have any effect. The second version sets first all background properties and then overrides the background color with another declaration. This is a possible coding style, though some people may say it is not good style.
The issue does not arise if you set background image using the specific background-image property instead of the shorthand. (A background image may cause that the background color is not seen, if the image fills the entire element area, but that’s a different issue.)
The following CSS, applied to an <a> and a <div> residing in individual <tr>▶<td> elements in a <table> (with border-collapse and td { padding: 0px; } set), works as expected:
a {
background-image: url("http://ibin.co/19rwR69EOigr");
height: 100px;
width: 120px;
display: block;
}
div {
width: 200px;
box-shadow: #000 0px 0px 13px;
}
If I apply any opacity to the <a>, the browser's internal layering seems to break horribly.
Note that the test picture's last pixel sits within the <div>'s box-shadow, even in the first example. (And it says opacity = ".99", if you can't see it in the image >.>)
Is this possibly a rendering bug that's managed to creep into both Firefox and Chrome? :P
See what opens and shuts in this JSFiddle.
Thanks in advance!
Quite Simple.
Thank you for clean formatting.
Change opaque ID to this:
#opaque {
opacity: .99;
z-index:-10;
position:relative;
}
http://jsfiddle.net/SinisterSystems/GbAYU/3/
What is happening is whenever opacity is set, the back-end method of CSS3 to interpret it throws some pretty wild z-index's.
Just set it to stack behind the other elements and all will work fine for you.
position:relative; - Cause otherwise it wouldn't accept your z-index property.
z-index:-10; - So that it places it behind the z-index of 0 of your other objects.
EDIT:
The default value of HTML elements does not support static as an object that z-index will apply to, hence the position declaration.
And it totally does with absolute, fixed, relative, or inherit, but not static.
What's the difference between specifying a background color using background and background-color?
Snippet #1
body { background-color: blue; }
Snippet #2
body { background: blue; }
Premising that those are two distinct properties, in your specific example there's no difference in the result, since background actually is a shorthand for
background-color
background-image
background-position
background-repeat
background-attachment
background-clip
background-origin
background-size
Thus, besides the background-color, using the background shorthand you could also add one or more values without repeating any other background-* property more than once.
Which one to choose is essentially up to you, but it could also depend on specific conditions of your style declarations (e.g if you need to override just the background-color when inheriting other related background-* properties from a parent element, or if you need to remove all the values except the background-color).
background will supercede all previous background-color, background-image, etc. specifications. It's basically a shorthand, but a reset as well.
I will sometimes use it to overwrite previous background specifications in template customizations, where I would want the following:
background: white url(images/image1.jpg) top left repeat;
to be the following:
background: black;
So, all parameters (background-image, background-position, background-repeat) will reset to their default values.
About CSS performance :
background vs background-color :
Comparison of 18 color swatches rendered 100 times on a page as small
rectangles, once with background and once with background-color.
While these numbers are from a single page reload, with subsequent
refreshes the render times changed, but the percent difference was
basically the same every time.
That's a savings of almost 42.6ms, almost twice as fast, when using
background instead of background-color in Safari 7.0.1. Chrome 33
appears to be about the same.
This honestly blew me away because for the longest time for two reasons:
I usually always argue for explicitness in CSS properties, especially with backgrounds because it can adversely affect specificity down the road.
I thought that when a browser sees background: #000;, they really see background: #000 none no-repeat top center;. I don't have a link to a resource here, but I recall reading this somewhere.
Ref : https://github.com/mdo/css-perf#background-vs-background-color
With background you can set all background properties like:
background-color
background-image
background-repeat
background-position
etc.
With background-color you can just specify the color of the background
background: url(example.jpg) no-repeat center center #fff;
VS.
background-image: url(example.jpg);
background-position: center center;
background-repeat: no-repeat;
background-color: #fff;
More info
(See Caption: Background - Shorthand property)
One of the difference:
If you use a image as background in this way:
background: url('Image Path') no-repeat;
then you cannot override it with "background-color" property.
But if you are using background to apply a color, it is same as background-color and can be overriden.
eg: http://jsfiddle.net/Z57Za/11/ and http://jsfiddle.net/Z57Za/12/
I've found that you cannot set a gradient with background-color.
This works:
background:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));
This doesn't:
background-color:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));
There is no difference. Both will work in the same way.
CSS background properties are used to define the background effects of
an element.
CSS properties used for background effects:
background-color
background-image
background-repeat
background-attachment
background-position
Background property includes all of this properties and you can just write them in one line.
They're both the same. There are multiple background selectors (i.e. background-color, background-image, background-position) and you can access them either through the simpler background selector or the more specific one. For example:
background: blue url(/myImage.jpg) no-repeat;
or
background-color: blue;
background-image: url(/myImage.jpg);
background-repeat: no-repeat;
The difference is that the background shorthand property sets several background-related properties. It sets them all, even if you only specify e.g. a color value, since then the other properties are set to their initial values, e.g. background-image to none.
This does not mean that it would always override any other settings for those properties. This depends on the cascade according to the usual, generally misunderstood rules.
In practice, the shorthand tends to be somewhat safer. It is a precaution (not complete, but useful) against accidentally getting some unexpected background properties, such as a background image, from another style sheet. Besides, it’s shorter. But you need to remember that it really means “set all background properties”.
Comparison of 18 color swatches rendered 100 times on a page as small
rectangles, once with background and once with background-color.
I recreated the CSS performance experiment and the results are significantly different nowadays.
background
Chrome 54: 443 (µs/div)
Firefox 49: 162 (µs/div)
Edge 10: 56 (µs/div)
background-color
Chrome 54: 449 (µs/div)
Firefox 49: 171 (µs/div)
Edge 10: 58 (µs/div)
As you see - there's almost no difference.
background is the shortcut for background-color and few other background related stuffs as below:
background-color
background-image
background-repeat
background-attachment
background-position
Read the statement below from W3C:
Background - Shorthand property To shorten the code, it is
also possible to specify all the background properties in one single
property. This is called a shorthand property.
The shorthand property for background is background:
body {
background: white url("img_tree.png") no-repeat right top;
}
When using the shorthand property the order of the property values is:
background-color
background-image
background-repeat
background-attachment
background-position
It does not matter if one of the property values is missing, as long
as the other ones are in this order.
This is the best answer. Shorthand (background) is for reset and DRY (combine with longhand).
background is shorthand property for the following:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
You can detailed info on every property here
Properties order
In most of browser implementation (i think maybe older browser could present issues) the order of the properties does not matter, except for:
background-origin and background-clip: when both of this properties are present, the first one refer to -origin and the second to -clip.
Example:
background: content-box green padding-box;
Is equivalent to:
background-origin: content-box;
background-color: green;
background-clip: padding-box;
background-size must always follow background-position and the properties must be separated by /
if background-position is composed by two numbers, the first one is the horizontal value and the second the vertical value.
I've noticed when generating emails for Outlook...
/*works*/
background: gray;
/*does not work*/
background-color: gray;
You can do some pretty neat stuff once you understand that you can play with inheritance with this. However first let's understand something from this doc on background:
With CSS3, you can apply multiple backgrounds to elements. These are
layered atop one another with the first background you provide on top
and the last background listed in the back. Only the last background
can include a background color.
So when one do:
background: red;
He is setting the background-color to red because red is the last value listed.
When one do:
background: linear-gradient(to right, grey 50%, yellow 2%) red;
Red is the background color once again BUT you will see a gradient.
.box{
border-radius: 50%;
width: 200px;
height: 200px;
background: linear-gradient(to right, grey 50%, yellow 2%) red;
}
.box::before{
content: "";
display: block;
margin-left: 50%;
height: 50%;
border-radius: 0 100% 100% 0 / 50%;
transform: translateX(70px) translateY(-26px) rotate(325deg);
background: inherit;
}
<div class="box">
</div>
Now the same thing with background-color:
.box{
border-radius: 50%;
width: 200px;
height: 200px;
background: linear-gradient(to right, grey 50%, yellow 2%) red;
}
.box::before{
content: "";
display: block;
margin-left: 50%;
height: 50%;
border-radius: 0 100% 100% 0 / 50%;
transform: translateX(70px) translateY(-26px) rotate(325deg);
background-color: inherit;
}
<div class="box">
</div>
The reason this happens is because when we are doing this :
background: linear-gradient(to right, grey 50%, yellow 2%) #red;
The last number sets the background-color.
Then in the before we are inheriting from background (then we get the gradient) or background color, then we get red.
One thing I've noticed that I don't see in the documentation is using
background: url("image.png")
short hand like above if the image is not found it sends a 302 code instead of being ignored like it is if you use
background-image: url("image.png")
There's a bug regarding with background and background-color
the difference of this,
when using background, sometimes when your creating a webpage
in CSS
background: #fff // can over ride a block of Mask image("top item, text or image"))
so its better to always use background-color
for safe use, in your design if its individual
I have a paragraph on a web page with 20 pixel margins on all 4 sides. I want to alter just the top and bottom paddings with a single property (so padding-top:0;padding-bottom:0; will not do).
What I have tried is demonstrated here.
http://jsfiddle.net/nFCru/1/
In this Fiddle, I tried to use padding: 30px inherit; to alter just the top and bottom paddings of a paragraph. However, this property-value pair sets the left and right paddings to 0 in addition to altering the top and bottom paddings.
p {
border: 1px solid #000;
padding: 20px;
}
/*
* Here's my failed attempt at only altering the top
* and bottom padding values. The left and right padding
* values are changing even if I use inherit.
*/
p {
padding: 30px inherit;
}
Can I alter only the top and bottom paddings with one property?
No, you can't. inherit means the element inherits the padding from its parent. That is, the body (or whatever element the p sits in), not the "original" p in the stylesheet. To leave the left and right padding intact, all you can do is use the two properties as you described.
In short, no.
The only allowable attributes for padding are width (fixed) or percentage, or inherit (from the parent element). There is no way to inherit values already set.
To set the individual padding values you must use the individual properties.
See http://www.w3.org/TR/CSS2/box.html#padding-properties
Until now you couldn't. But even though this is a very old question I thought I'd update it with a new answer.
With the CSS Logical Properties and Values draft you will be able to do this in the future.
It allows you to specify the start and end of a block or inline padding which is dependent on writing mode and direction instead of simple left-to-right based on the screen in front of you.
If you wanted to specify a 10px padding on the top and bottom of an element you could achieve this with the following for example:
.element {
padding-block: 10px;
}
Although not yet supported by any browsers you could already use this in your projects by using PostCSS with the PostCss Preset-Env plugin.
If you only wanted to change the top and bottom, just use the shorthand padding:30px 0px 30px; would be top, right, bottom.
Inherit basically inherits only the parent element's style but in your case you can't use inherit but you can do the following for two "p" elements using class.
p{
border: 1px solid #000;
padding: 20px;
}
p.another{
padding: 30px 20px;
}
<p>A Paragraph with 20px top, right, bottom, left</p>
<p class="another">Another Paragraph with 30px top, 20px right, 30px bottom, 20px left</p>
I am unable to understand especially in background property.
.stars div a {
background: transparent url(sprite_rate.png) 0 0 no-repeat;
display: inline-block;
height: 23px;
width: 12px;
text-indent: -999em;
overflow: hidden;
}
background:
transparent hope it's clear :)
url(sprite_rate.png) a background image
0 0 a position in the container - left top corner
no-repeat the background image shouldn't repeat
display: inline-block;
a box behaving like an inline element, see http://www.w3schools.com/css/pr_class_display.asp
height: 23px;
width: 12px;
size of an element
text-indent: -999em;
kicks the element far beyond the visible area, http://www.w3schools.com/css/pr_text_text-indent.asp
overflow: hidden;
hides the content that doesn't fit in the element, http://www.w3schools.com/css/pr_pos_overflow.asp
The CSS background property is a shorthand property of the following properties below:
The order of the property values for the CSS background property are:
background-color
background-image
background-repeat
background-attachment
background-position
It does not matter if one of the property values is missing, as long as the ones that are present are in this order.
In your case you're doing the following:
background: transparent url(sprite_rate.png) 0 0 no-repeat;
transparent
That means that the background color is transparent
url(sprite_rate.png)
The url of the background image is sprite_rate.png.
0 0
The left and top position is 0px.
no-repeat
The last parameter is no-repeat which means the image will not repeat on the x- and y- axis.
Here's link to all the properties in correct order:
http://www.w3schools.com/css/pr_background-color.asp
http://www.w3schools.com/css/pr_background-image.asp
http://www.w3schools.com/css/pr_background-position.asp
http://www.w3schools.com/css/pr_background-repeat.asp
You can read more about the background shorthand property at:
http://www.w3schools.com/css/css_background.asp
The syntax for the background CSS shorthand property is:
background: { background-color background-image background-repeat background-attachment background-position | inherit } ;
It combines a large number of background properties into a single shorthand property. See:
http://reference.sitepoint.com/css/background for more information.
The technique you're looking at is known as CSS Sprites. You can find more information about it here:
http://www.alistapart.com/articles/sprites
Draws the top-left corner of sprite_rate.png over an otherwise transparent background without repeating (tiling) the image. It will be displayed inline (between text) but act as a block and will be 12 pixels wide and 23 pixels high. The first line of text will be indented so far to the left that most likely none of it will be visible, especially since overflow will be hidden (nothing outside the 12x23 rectangle will be rendered).
All of that could have been googled.