Closed
Bug 682090
Opened 14 years ago
Closed 14 years ago
background gradient causes transparent border to render in color
Categories
(Core :: Layout: Block and Inline, defect)
Tracking
()
RESOLVED
INVALID
People
(Reporter: natebates, Unassigned)
Details
Attachments
(6 files)
User Agent: Mozilla/5.0 (Windows NT 5.1; rv:6.0) Gecko/20100101 Firefox/6.0
Build ID: 20110811165603
Steps to reproduce:
styled an element using background gradient & transparent border
Actual results:
the border showed
Expected results:
no border visible
By default the background is drawn below the border.
You can control thuth with the "background-clip" property.
e.g. {background-clip:content-box;} should do the job.
See https://developer.mozilla.org/en/CSS/background-clip
Status: UNCONFIRMED → RESOLVED
Closed: 14 years ago
Resolution: --- → INVALID
If I'm understanding this bug report correctly, perhaps it should be reopened. I think what the OP is saying is that, when over a gradient background, a transparent box border is visible rather than showing the gradient. I didn't test this fully, but it looks like the gradient colors under the transparent border are the opposite of what they should be, in the direction of the gradient. At a 45 degree gradient direction, all the transparent borders are wrong. I'll attach an updated testcase.
Attachment #565813 -
Attachment mime type: text/plain → text/html
Sorry for the spam, but thought I should mention what I tested with.
Mozilla/5.0 (X11; Linux x86_64; rv:10.0a1) Gecko/20111009 Firefox/10.0a1 SeaMonkey/2.7a1
I think that's the expected result. A gradient is just a shorthand for generating an image. The default background-image properties are still background-repeat: repeat, background-origin: padding-box, and background-clip: content-box. See http://dev.w3.org/csswg/css3-background/ . The way the gradient generates the image generates an image that fills the padding box; see http://dev.w3.org/csswg/css3-images/#default-sizing and http://dev.w3.org/csswg/css3-background/#the-background-size .
And if you want the gradient to cover the area under the border as well, you should be able to get that behavior with 'background-origin: border-box'.
Oh, and in comment 5 when I wrote "background-clip: content-box" I meant "background-clip: border-box".
> it looks like the gradient colors under the transparent border are the opposite of what they should be
The gradient repeats itself like it should, I'd say.
Set background-origin property if you don't like that
https://developer.mozilla.org/en/CSS/background-origin
|
||
Comment 10•13 years ago
|
||
I've added a couple of additional tests. Using an inset 50% transparent box shadow, I was able to create a border that looks like what I thought a transparent border would. I also tried using background-origin and background-clip as suggested, but they do not create the desired effect; in fact, they render the border no differently than not using them.
I'm not intending to seem contrary. If the renderings are according to standards, and they must be since they are the same on multiple browsers, I'm just finding it interesting and completely counter-intuitive. :-) Perhaps the examples in this testcase will help anyone with a similar issue.
|
|
||
Comment 11•13 years ago
|
||
Comment on attachment 566064 [details]
using box-shadow and border-box
><!DOCTYPE html>
><html lang="en">
> <head>
> <meta charset="UTF-8">
> <title>Border Opacity Test</title>
> <style type="text/css">
> body {
> background-color:#f0f;
> }
> .box {
> float:left;
> display:block;
> height:100px;
> margin:10px;
> width:100px;
> font-size: 13px;
> }
> .border-white {
> border:5px solid rgba(255,255,255,1);
> }
> .border-trans {
> border:5px solid rgba(255,255,255,0);
> }
> .border-semi-trans {
> border:5px solid rgba(255,255,255,0.5);
> }
> .shadow-inset-trans {
> -moz-box-shadow: 0 0 0 5px rgba(255,255,255,0.5) inset;
> -webkit-box-shadow: 0 0 0 5px rgba(255,255,255,0.5) inset;
> box-shadow: 0 0 0 5px rgba(255,255,255,0.5) inset;
> padding: 5px;
> }
> .border-bg-origin {
> border:5px solid rgba(255,255,255,0.5);
> -moz-background-origin: border-box;
> -webkit-background-origin: border-box;
> background-origin: border-box;
> -moz-background-clip: border-box;
> -webkit-background-clip: border-box;
> background-clip: border-box;
> }
>
>
>.bg-grad-trans {
> background: -moz-linear-gradient(rgba(255,255,0,0), rgba(255,255,0,0));
> background: -webkit-linear-gradient(rgba(255,255,0,0), rgba(255,255,0,0));
> background: -o-linear-gradient(rgba(255,255,0,0), rgba(255,255,0,0));
> }
>.bg-grad-solid-trans {
> background: -moz-linear-gradient(rgba(255,255,0,1), rgba(255,255,0,0));
> background: -webkit-linear-gradient(rgba(255,255,0,1), rgba(255,255,0,0));
> background: -o-linear-gradient(rgba(255,255,0,1), rgba(255,255,0,0));
> }
>.bg-grad-solid {
> background: -moz-linear-gradient(rgba(255,255,0,1), rgba(0,0,0,1));
> background: -webkit-linear-gradient(rgba(255,255,0,1), rgba(0,0,0,1));
> background: -o-linear-gradient(rgba(255,255,0,1), rgba(0,0,0,1));
> }
>.bg-grad-trans-angle {
> background: -moz-linear-gradient(rgba(45deg,255,255,0,0), rgba(255,255,0,0));
> background: -webkit-linear-gradient(rgba(45deg,255,255,0,0), rgba(255,255,0,0));
> background: -o-linear-gradient(rgba(45deg,255,255,0,0), rgba(255,255,0,0));
> }
>.bg-grad-solid-trans-angle {
> background: -moz-linear-gradient(45deg,rgba(255,255,0,1), rgba(255,255,0,0));
> background: -webkit-linear-gradient(45deg,rgba(255,255,0,1), rgba(255,255,0,0));
> background: -o-linear-gradient(45deg,rgba(255,255,0,1), rgba(255,255,0,0));
> }
>.bg-grad-solid-angle {
> background: -moz-linear-gradient(45deg,rgba(255,255,0,1), rgba(0,0,0,1));
> background: -webkit-linear-gradient(45deg,rgba(255,255,0,1), rgba(0,0,0,1));
> background: -o-linear-gradient(45deg,rgba(255,255,0,1), rgba(0,0,0,1));
> }
> </style>
> </head>
> <body>
> <div class="box bg-grad-trans border-white">
> 1a this should have a white border
> </div>
> <div class="box bg-grad-solid-trans border-white">
> 1b this should have a white border
> </div>
> <div class="box bg-grad-solid border-white">
> 1c this should have a white border
> </div>
> <br style="clear:both" />
> <div class="box bg-grad-trans border-trans">
> 2a this should have 100% transparent border showing bg color
> </div>
> <div class="box bg-grad-solid-trans border-trans">
> 2b this should have 100% transparent border showing bg gradient
> </div>
> <div class="box bg-grad-solid border-trans">
> 2c this should have 100% transparent border showing bg gradient
> </div>
> <br style="clear:both" />
> <div class="box bg-grad-trans border-semi-trans">
> 3a this should have 50% transparent white border
> </div>
> <div class="box bg-grad-solid-trans border-semi-trans">
> 3b this should have 50% transparent white border
> </div>
> <div class="box bg-grad-solid border-semi-trans">
> 3c this should have 50% transparent white border
> </div>
> <br style="clear:both" />
> <div class="box bg-grad-trans-angle border-semi-trans">
> 4a 45 degree angle bg gradient, this should have 50% transparent white border
> </div>
> <div class="box bg-grad-solid-trans-angle border-semi-trans">
> 4b 45 degree angle bg gradient, this should have 50% transparent white border
> </div>
> <div class="box bg-grad-solid-angle border-semi-trans">
> 4c 45 degree angle bg gradient, 4c this should have 50% transparent white border
> </div>
> <br style="clear:both" />
> <div class="box bg-grad-trans shadow-inset-trans">
> 5a What I expected 3a would look like, this uses inset 50% transparent box-shadow
> </div>
> <div class="box bg-grad-solid-trans shadow-inset-trans">
> 5b What I expected 3b would look like, this uses inset 50% transparent box-shadow
> </div>
> <div class="box bg-grad-solid shadow-inset-trans">
> 5c What I expected 3c would look like, this uses inset 50% transparent box-shadow
> </div>
> <br style="clear:both" />
> <div class="box bg-grad-trans border-bg-origin">
> 6a background-origin: border-box;<br>background-clip: border-box;<br>Still looks like 3a
> </div>
> <div class="box bg-grad-solid-trans border-bg-origin">
> 6b background-origin: border-box;<br>background-clip: border-box;<br>Still looks like 3b
> </div>
> <div class="box bg-grad-solid border-bg-origin">
> 6c background-origin: border-box;<br>background-clip: border-box;<br>Still looks like 3c
> </div>
> <br style="clear:both" />
> <p>Notice boxes 2b and 2c have top and bottom borders that are the reverse colors of the background gradient.</p>
> <p>The effect is perhaps more noticeable with a 50% transparent white border. The left and right borders of boxes 3b and 2c follow the background gradient, but the top and bottom borders reverse the gradient colors</p>
> <p>When the background is 45 degrees in boxes 4b and 4c, all borders are wrong.</p>
> <p>Boxes 5a-5c show the desired effect. These use a 50% transparent inset box shadow.</p>
> <p>Boxes 6a-6c set background-origin and background-clip to border-box. These still do not show the borders I would have expected.</p>
> </body>
></html>
Attachment #566064 -
Attachment mime type: text/plain → text/html
|
|
||
Comment 12•13 years ago
|
||
Sigh, sorry, didn't mean to add comment 11, was just trying to change type to text/html.
|
||
Comment 13•13 years ago
|
||
(In reply to Andy Boze from comment #10)
> I've added a couple of additional tests. Using an inset 50% transparent box
Ok, you are right. The real answer is here:
(In reply to j.j. from comment #9)
> The gradient repeats itself like it should, I'd say.
"background-repeat: no-repeat" is your friend!
https://developer.mozilla.org/en/CSS/background-repeat
|
|
||
Comment 14•13 years ago
|
||
|
|
||
Comment 15•13 years ago
|
||
(In reply to j.j. from comment #13)
> Ok, you are right.
oops, you are not.
"background-origin" and "background-clip" work as you would expect (sorry for confusion).
|
|
||
Comment 16•13 years ago
|
||
|
|
||
Comment 17•13 years ago
|
||
OK, I finally saw what I wasn't understanding. When I was testing, I was placing the background-origin and background-clip properties *before* the background shorthand property, which was resetting them to their default values. Thanks for the explanations. I'll go away now. :-)
You need to log in
before you can comment on or make changes to this bug.
Description
•