I have set a specific background color for the body. I then want to use another div with the same background color but with opacity: .95 as a mask for content animating from the bottom of the page. This results in the masking div appearing to be a slightly different color. Is there any way around this?
See a screenshot here and the sample CSS below. I'm on Chrome 20 on Lion.
body
{
background: #3f3c45;
}
#bottommask
{
background: #3f3c45;
opacity: .95;
}
UPDATE: Please check this fiddle demonstrating the issue
UPDATED SOLUTION: It seems that at least in Chrome, using -webkit-backface-visibility: hidden; on the mask div solves the issue.
It it a matter of computing the effect of the 5% color gain from below.
Three ways:
calculating, or
trial/error with Firebug color picker, or
make a screenshot and sample the transparent color, then apply the sampled color to the non alpha background.
For the tattoo site, I've changed to a slightly different color, in order to accounting for the color shift of the opacity.
body {
background: #8d918f;
}
Related
With the following CSS:
#divPic {
height: 32pc;
background-image: url('https://wallpaperscraft.com/image/black_black_white_bone_time_game_noise_74543_4000x2248.jpg');
background-repeat: no-repeat;
background-position: left center;
background-color: #000000;
opacity: 1;
}
... I set the image dice.jpg as the background-image of the div with id divPic.
The result is this:
The problem is that the picture doesn't cover the whole range of the frame.
If I change the background-color to blue, you can see which part is covered by the image and which part is not:
I am using background-color black (#000000), so it looks more or less ok but what is annoying me is that, if you look closely, you see the right edge of the image ... i.e. the background-color (#000000) and the color of the image (some slightly different black) do not match perfectly. I tried experimenting with different kind of black (e.g. #000008 instead of #000000, etc.) but you could still see the edge where the image ends and the background-color begins.
My question is therefore: is there some way to smooth out the transition between the image and the background-color so that you don't see the edge anymore?
*************************************UPADTE*********************************
Here's some context:
I'm using bootstrap, the frame for the picture is a bootstrap-column:
<div id="picContainer" class="row">
<div class="col-xs-12 thumbnail" id="divPic"></div>
<div class="col-xs-12" id="button_div"></div>
</div>
I don't have enough reputation to make a comment, but have you tried using either #010101 or #020202 as background colors? This is the color of the image at the edge, so choosing either of these will make it look as smooth as possible without needing to apply a transparency gradient to the image or what-have-you.
UPDATE:
If you need an actually smooth transition, you can apply a CSS3 gradient on top of the background image to transition into the color you want. The following JSFiddle has an example of this, using the code below: https://jsfiddle.net/Auroratide/7j8c0v1k/
#divPic {
background-repeat: no-repeat;
background-image: linear-gradient(to right, rgba(2, 2, 2, 0) 300px, rgba(2, 2, 2, 1) 400px), url('https://wallpaperscraft.com/image/black_black_white_bone_time_game_noise_74543_4000x2248.jpg');
}
I used this Stack Overflow answer as reference.
I've encountered some problems regarding the use of an svg. I have the following html and css codes
<i id="iconApp" class="icon_approved icon_lg pull-right"></i>
.icon_approved {
background-color: #fab700;
display: block;
mask: url(../Tick-Solid.svg) no-repeat 50% 50%;
-webkit-mask: url(../Tick-Solid.svg) no-repeat 50% 50%;
background: url(../Tick-Solid.svg) no-repeat 50% 50%;
}
The mask does not work on firefox, that's why I added the background property instead and it works the way I wanted it to be. However, the color does not work as expected. Instead of having a color of #fab700, it is instead being interpreted as a background color.
The orange should be the color of the Icon, not a background color.
Additional info:
I can't find a search term to look for this kind of problem but I did find something similar to my problem.
Link : http://codepen.io/noahblon/post/coloring-svgs-in-css-background-images
Upon looking at the first example, it renders properly on chrome. But if you opened the link on firefox, it appears as boxes (which I assume is background color of the element).
You can't change the colour of the contents of an SVG referenced via background-image. All setting background-color does is set the fallback colour of the background. Which is what you are seeing here.
If you want to change the icon colour, you have to change the SVG file. Or you could inline the SVG in the HTML, It is also possible to do it via an <object> element.
Try
.icon_approved {
fill: #fab700;
}
I have a few photos and I want on hover I want to cover them with background: black; I want to cover the whole image with black for example. The hover effect just doesn't appear. I suspect the problem is in the CSS selectors.
Here is the fiddle: http://jsfiddle.net/20oomme4/3/
I tested your fiddle and it is working. I modified the colors and tested again - and it worked again. However, you images were broken links, so I could easily see the background color. My guess is that your images are opaque and, therefore, you cannot see the color that is BEHIND them.
Your best bet is to create two images - one with normal color and one with black color. Call the normal image "NormalImage.jpg" and call the black background one "NormalImage_black.jpg". Then, onhover, replace ".jpg" with "_black.jpg" - and on mouseout, replace "_black.jpg" with ".jpg". If you are having trouble doing this with css, try using Javacsript - and remember to load all images (but hide the backgorund ones) upon page_load, so that when someone hovers, the browser doens't have to load the image - it only needs to display it.
I'm unsure of what you want exactly. If you want a transparent background to cover the image.
jsfiddle
Other wise you would need to use transparent png's to change the white to black background on the image itself.
.img-responsive.products {
border: 1px solid black;
cursor: pointer;
}
figcaption {
position: absolute;
top: 0;
left: 0;
padding: 20px;
background: #2c3f52;
color: #ed4e6e;
}
figcaption {
height: 100%;
width: 100%;
opacity: 0;
color:#fff;
text-align: center;
backface-visibility: hidden;
transition: transform 0.3s, opacity 0.3s;
}
.col-sm-3:hover figcaption {
opacity: 0.4;
}
The hover effect is working as it is intended, the problem is the images are taking up the full area so you can't see any background effects. Try giving the images a padding:20px; to see the background changes. As mentioned above you will need to either create an image sprite or change the image to a transparent .png in order for the full background to change.
ex: http://jsfiddle.net/20oomme4/6/
Check this fiddle
This is the same CSS that you used, ie.
.img-responsive.products:hover {
background-color: black;
}
Only thing is that i've used a png image with no background. And as you can see in the fiddle your code works correctly.
So, As i mentioned in my comments, i would suggest you to use a png image without any background.
Take a look at http://www.kickstarter.com.
When you hover over their logo, the image lights up. Is this effect doable without using a different image on hover?
My first idea was to use ::after:hover and add a white square with high transparency that covers the logo, but since my logo is placed on a blue background this would not work. Another idea is to set opacity to 0.9 and on hover set it to 1. But this makes the image look too dark by default.
You may be able to use the css image filters, like this:
img:hover {-webkit-filter: brightness(150%); }
This sometimes looks funny and will only work in webkit browsers, but it's the best solution I could think of. It'll allow you to keep your blue background as well.
Here's a jsfiddle showing the Kickstarter logo on a blue background.
http://jsfiddle.net/62bCB/
Cheers,
As far as I am aware you can't do what you require with pure CSS at this point, due to the blue background. I think your best bet is edit the image in photoshop to be its :hover brightness, and then use something like:
img {
opacity: 0.7;
}
img:hover {
opacity: 1;
}
Changing the opacity on hover will work:
img:hover {
opacity: 0.5;
}
Fiddle
The original CSS has:
img:hover {
filter: alpha(opacity=80);
opacity: .8;
}
Fiddle: http://jsfiddle.net/praveenscience/hfUpk/
You have a few choices depending on what browsers you need to support. You could make the logo a background image and then change the image on hover. (or sprite the image so that you don't get a flicker)
Or you could try a combination of CSS opacity and microsoft filters for older versions of IE.
http://www.w3schools.com/cssref/css3_pr_opacity.asp
Since you mention you have a dark background you can try some of the new CSS filters (saturation, brightness etc) but you're out of luck for IE.
http://www.html5rocks.com/en/tutorials/filters/understanding-css/
You could use this CSS code which makes lighting up a smoother transition than just instantly bright. Techpp.com and Techlivewire.com also use this same css or one similar to it on their frontpage featured sections. I could not get CSS to post on here since stackoverflow kept giving me errors so I put it in a pastie. http://paste2.org/1L9H2XsF
you can use opacity value between 0.1 to 1
very light and 1 value is dark (default)
img {
filter: alpha(opacity=100);
opacity: 1;
}
img:hover {
filter: alpha(opacity=70);
opacity: 0.7;
}
Sorry for the obtuse title; here's a jsfiddle example.
Basically, I've got a div inside of another one. The big one has a light blue background, and the little one has a darker blue background.
I want to give the smaller one a border on hover, so I start it with the same size border but the same color as the background (so that it doesn't move around when the border is added).
This border that is the same color as the background artifacts when there's a border radius. Take a look at Chrome:
But Safari is fine:
Is this a known bug? Can I submit a report?
And more importantly, is there a workaround?
How about making your border transparent:
border: 2px solid transparent;
To make this work in IE6, you can add:
*html #inner
{
border-color: pink;
filter: chroma(color=pink);
}
The IE workaround is from http://acidmartin.wordpress.com/2008/08/24/emulating-border-color-transparent-in-internet-explorer-6/
Sometimes you can solve these issues by using background-clip: padding-box;.
It doesn't work quite perfectly on your jsfiddle example (http://jsfiddle.net/KPAVU/5/), but may have better results with the real markup.