I have a background image and want to add a transparent fill color on top of that. I use modern browsers like Firefox and Google Chrome.
This code works (but does not solve the problem)
background: url('bkg.jpg'), rgba(0,0,0, .5);
This code don't work (but should solve my problem)
background: rgba(0,0,0, .5), url('bkg.jpg');
Why? Solution?
https://developer.mozilla.org/en/CSS/background says:
Note: The background-color can only be defined on the last background,
as there is only one background color for the whole element.
http://www.w3.org/TR/css3-background/#layering says:
The background color, if present, is painted below all of the other
layers.
http://www.w3.org/TR/css3-background/#background-color says:
This property sets the background color of an element. The color is
drawn behind any background images.
Maybe you could use the :before/:after pseudoelements instead with absolute positioning.
http://jsfiddle.net/3mNkZ/3/
div {
background: rgba(0,255,0, .5);
width: 200px; height: 200px;
border: 10px solid red;
position: relative;
font-size: 100px;
color: white;
}
div:before {
background: url('http://placekitten.com/200/150');
content: ' ';
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
}
You have to make a div that is the same size as the window to get the effect.
Here is a jsfiddle and the code below.
html{
background: url('http://tribulant.net/lightbox/files/2010/08/image-2.jpg');
}
.color {
background-color: rgb(100,0,0);
opacity: 0.5;
height: 100%;
width: 100%;
position: absolute;
top: 0px;
bottom: 0px;
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
It seems something like this has been addressed before, but most of what I'm finding is for the more generic issue that doesn't pertain to most browsers today. I'm encountering the known IE issue where using border-radius with a border and a background (a color in my case) results in the background bleeding beyond the border.
I'm wondering if there is a workaround that actually can mask this issue... Some of the things I've tried:
<meta http-equiv="X-UA-Compatible" content="IE=10" />
overflow:hidden on the parent
background-clip:border-box
adding .1 to the border-radius
None of these have worked. Is there another workaround (other than "use images") while I wait for yon IE team to fix things?
I've created a fiddle that illustrates this well and documents what I've found in more detail.
I have experienced this before.
I recommend instead styling the border with CSS generated content, in a manner such as this:
.redcircle::after {
content:'';
display:block;
left:0;
top:0;
right:0;
bottom:0;
border-radius:100px;
border:10px solid yellow;
position:absolute;
pointer-events: none; //ensures no clicks propogate if this is desired
}
You can crate an ::before or ::after CSS Pseudo and make your background: red; on them. Set your width, height and border-radius on 100% and for example don't change z-index to -1, you can see his get the inside width and hight and don't bleeding out.
Screenshot from Explorer 9 on Vista
And now for example (how its look without z-index play):
body {
background: white;
}
.bluebox {
background: blue;
width: 200px;
height: 200px;
}
.redcircle {
position: absolute;
left: 140px;
top: 40px;
text-align: center;
height: 100px;
width: 100px;
border-radius: 100px;
font-size: 100px;
line-height: 100px;
color: black;
border: 10px solid yellow;
}
.redcircle::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 100%;
background: red;
}
<div class="bluebox">
<div class="redcircle">
!
</div>
</div>
And this one for using:
body {
background: white;
}
.bluebox {
background: blue;
width: 200px;
height: 200px;
}
.redcircle {
z-index: 1;
position: absolute;
left: 140px;
top: 40px;
text-align: center;
height: 100px;
width: 100px;
border-radius: 100px;
font-size: 100px;
line-height: 100px;
color: black;
border: 10px solid yellow;
}
.redcircle::before {
z-index: -1;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 100%;
background: red;
}
<div class="bluebox">
<div class="redcircle">
!
</div>
</div>
Fiddle Demo
Borrowing from Zeev's answer, which moves the background-color to a :before or :after (which only substitutes a subpixel gap for a subpixel bleed, and across more browsers), and Phil's answer, which moves the border to an :after (which didn't really fix the problem).
Move the background-color to a :before as suggested by Zeev, but give it padding equal to the border-width minus two (or use calc()). Then give it negative top and left positioning with that same amount.
Then move the border to the :after but give it negative top and left positioning equal to the border-width.
This creates an oversized background and recenters it below the content. Then it creates an oversized border and centers it around the content. You could probably oversize the background to other degrees and get the same result. The point is to make it bigger than the hole inside the border, but smaller than the outside of the border. This, naturally, would fail with thin borders, though.
body {
background: white;
}
.bluebox {
background: blue;
width: 200px;
height: 200px;
}
.redcircle {
z-index: 1;
position: absolute;
left: 150px;
top: 50px;
text-align: center;
height: 100px;
width: 100px;
border-radius: 100px;
font-size: 100px;
line-height: 100px;
color: black;
}
.redcircle::before,
.redcircle::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
}
.redcircle::before {
z-index: -1;
background: red;
top: -8px;
left: -8px;
padding: 8px;
}
.redcircle::after {
top: -10px;
left: -10px;
border: 10px solid yellow;
}
<div class="bluebox">
<div class="redcircle">
!
</div>
</div>
background-clip fixes this issue:
.bluebox {
background-clip: padding-box;
}
I have a button class styled in css, in which background image is used, like this:
.button {
display: block;
background-position: center;
background-size: 30px 28px;
background-repeat: no-repeat;
background-color: transparent;
border: 0;
width: 100%;
background-image: url('foo.png');
}
The shape in .png is really simple - it's just an orange circle. So I want to draw it in css instead, to avoid using external asset. So I thought of using the following css object (which draws an orange circle):
#circle {
width: 100px;
height: 100px;
background: orange;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
Is there some way to use that in such a way, that it would behave exactly as the background-image .png? (I know I could just make another button class in which I would have drawn the button differently but I want to reuse the button class already available).
This can be achieved using a pseudo element, I made a fiddle. You can play with the dimensions of course.
.button {
display: block;
border: 0;
width: 300px;
height: 200px;
position: relative;
background: transparent;
/* just to show where the button is */
border:1px solid #000;
}
.button:before {
content: '';
display: block;
background: orange;
border-radius: 50%;
height: 100px;
width: 100px;
/* make sure background is behind text */
z-index: -1;
/* center circle in button, negative margins = half of circle dimensions */
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}
How about using SVG in a data URI? Here's a fiddle showing the example and the code used to generate it (the link is just 194 characters long):
var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="30" height="28">'
+ '<ellipse cx="15" cy="14" rx="15" ry="14" fill="orange"/></svg>';
location.href = 'data:image/svg+xml;base64,' + btoa(svg);
Is it possible to create gradient borders combined with a border radius?
I created a button with an ::after element
button{
background: -webkit-gradient ...
}
button::after{
content: '';
position: absolute;
height: calc(100% - 2px);
width: calc(100% - 2px);
left: 1px;
top: 1px;
background: rgba(16,20,28,1);
border-radius: 40px;
z-index: -1;
}
Which looks like:
The problem is that the inner element should be transparent. If the background-color property of button is set to transparent, the button takes on the color (gardiet) of the ::after element:
I have found the following picture on the internet where the inner body is transparent and the border is a gradient.
There are multiple tricks to get such a border but these don't support the border-radius.
A posibility, limited in support to modern browsers (all major browser except IE) and also limited to the colors that you can achieve, is to use mix-blend-mode, that can make gray look like transparent.
Also, some special properties to get the border, to begin with
.container {
width: 300px;
height: 100px;
background-color: lightgreen;
}
.test {
position: absolute;
margin: 20px;
font-size: 30px;
border-radius: 1em;
border: solid 12px transparent;
width: 200px;
background: linear-gradient(gray,gray), linear-gradient(to right, red, blue);
background-clip: content-box, border-box;
background-origin: border-box;
mix-blend-mode: hard-light;
}
<div class="container">
<div class="test">TEST</div>
</div>
I'm trying to create a CSS button and add an icon to it using :after, but the image never shows up. If I replace the 'background' property with 'background-color:red' then a red box appears so I'm not sure what's wrong here.
HTML:
<a class="button green"> Click me </a>
CSS:
.button {
padding: 15px 50px 15px 15px;
color: #fff;
text-decoration: none;
display: inline-block;
position: relative;
}
.button:after {
content: "";
width: 30px;
height: 30px;
background: url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -50px no-scroll;
background-color: red;
top: 10px;
right: 5px;
position: absolute;
display: inline-block;
}
.green {
background-color: #8ce267;
}
You can check this fiddle to see what I mean exactly.
Thanks for any tips.
A couple things
(a) you cant have both background-color and background, background will always win. in the example below, i combined them through shorthand, but this will produce the color only as a fallback method when the image does not show.
(b) no-scroll does not work, i don't believe it is a valid property of a background-image. try something like fixed:
.button:after {
content: "";
width: 30px;
height: 30px;
background:red url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -50px fixed;
top: 10px;
right: 5px;
position: absolute;
display: inline-block;
}
I updated your jsFiddle to this and it showed the image.
As AlienWebGuy said, you can use background-image. I'd suggest you use background, but it will need three more properties after the URL:
background: url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") 0 0 no-repeat;
Explanation: the two zeros are x and y positioning for the image; if you want to adjust where the background image displays, play around with these (you can use both positive and negative values, e.g: 1px or -1px).
No-repeat says you don't want the image to repeat across the entire background. This can also be repeat-x and repeat-y.
is there a way I can stop the opacity from affecting my links text when the mouse pointer hovers over my link? I just want the opacity to affect the image only.
Here is the CSS.
.email {
background: url(../images/email.gif) 0px 0px no-repeat;
margin: 0px 0px 0px 0px;
text-indent: 20px;
display: inline-block;
}
.email:hover {
opacity: 0.8;
}
Here is the xHTML.
Email
Short answer: No.
Long answer: Yes, if you use rgba colors instead of the opacity property. For example, the following would give you a black background with 20% opacity, and black text with full opacity:
p {
background: rgba(0, 0, 0, 0.2);
color: #000000;
}
For background images, use a PNG with alpha channels.
Not with a background image (you can if it's just a background color). Instead of using opacity, replace the background image with less opaque version in .email:hover.
Yes, take the text out of the context of the transparent container with absolute positioning. This will work with background images as well!
<div id="TransContainer">
<div id="TransBox" href="#">Some text that will be opaque!</div>
<div id="NonTransText">Some text that I do not want opaque!</div>
</div>
<style>
#TransContainer
{
position: relative;
z-index: 100;
display: block;
width: 420px;
height: 165px;
background-color: blue;
}
#TransBox
{
background-color: green;
display: block;
width: 100px;
height: 100px;
opacity:0.4;
filter:alpha(opacity=40)
}
#NonTransText
{
color: #000;
position: absolute;
top: 20px;
left: 0;
}
</style>