Dear @mtf (and dear coding fellowship),
inspired by your always insightful explanations — mainly this one that I am replying to —, also as part of my Codecademy’s Cheatsheet project, and finally for pure learning’s sake, I’ve coded a page — which I’ve later on expanded to a whole site It can be checked thru my avatar pop-up (thanks once again, @mtf!!! )
I was trying to put to the test all this specificity issue, to see how much I could learn by doing it on my own. On the home page of the site, I’ve practiced HTML tables with a CSS hierarchy table, and I was wondering if you could give me your opinion about it.
Although, I’d be rather interested to know your opinion about the conclusions I’ve drawn on the page that I’ve mentioned at first, where I’ve tried to test CSS specificity as much as I’ve been able to.
By practicing on this today, I also got a question about CSS.
For the header
of the site, I’ve tried overlaying a color to an image using the opacity
property over the former, so that I would color the image. I’ve used this piece of code, which is doing the trick but, at the same time, obviously yielding errors:
header {
background-image: url("bg.png") z-index: inherit 1;
background-color: rgb(0,0,255,0.5);
padding: 25px;
}
I’ve researched on Stack Overflow, and it seems like I can do it by overlaying two different ‘containers’. I was just wondering if there’s a way that you can do it in just one. Like trying to tell “the machine” to:
1.- Place an image
2.- Place a color with reduced opacity.
3.- Place the color over the image using z-index.
Something tells me it should be possible or that even I might be going down the right path, but, at the same time, I don’t know how to wrap it up properly.
Anyway, sir, lot of thanks once again. Indeed, quite inspiring are those explanations of yours.
Cheers.