How can I make the navigation black & transparent/see through like this?
I tried using rgba, but it made the black a whiter color
nav {
width:100%;
height: 3rem;
background-color:rgba(0,0,0,0.3);
}
<nav>Nav</nav>
Try this hex code
nav {
width:100%;
height: 3rem;
background-color: #0000009E;
}
Also you can try and add another css rule.. opacity: 0.3;
play with the value between 0 to 1.
You're already doing it actually. You're using an rgba color value, which is already a step in the right direction.
RGBA color value is specified with: rgba(red, green, blue, alpha). The
alpha parameter is a number between 0.0 (fully transparent) and 1.0
(fully opaque).
Now you just need to set your background image. Try this:
nav {
width:100%;
height: 3rem;
background-color:rgba(0,0,0,0.7);
}
nav > p {
color: white;
}
body {
background-image: url("https://webneel.com/daily/sites/default/files/images/daily/10-2013/3-nature-photography-cherry-tree.jpg");
}
<nav><p>Nav</p></nav>
Related
I'm trying to achieve a monochrome colored image on mouse hover, where the colors of the image are transformed to grayscale and the gray shades afterwards replaced with the shade of color i'm blending with.
It could look like this
To simulate this in photoshop you can grayscale a image add your desired color layer on top and blend it with screen mode.
As far as i understand css has this potential if you combine the css filter and the background-blend-mode, but the result will always be grayscale if you use the filter.
So i'm asking if there any other ways to get this blend, or to grayscale images before without the css filter
You can do it in one single step, using luminosity as the blend mode.
In this mode, luminosity is taken from the front layer(the image), and the hue and saturation are taken from the background (here, a solid color)
The following demo gives you also the posibility to asign the color filter thru the class
.test {
width: 400px;
height: 200px;
margin: 10px;
background-size: cover;
background-image: url(http://placekitten.com/1000/750);
}
.test:hover {
background-blend-mode: luminosity;
}
.red {
background-color: red;
}
.green {
background-color: greenyellow;
}
<div class="test red"></div>
<div class="test green"></div>
Another solution, where black in the image gives full saturated color (instead of black). A little bit more complex to set up, but achievable.
.test {
width: 400px;
height: 200px;
background-size: cover;
background-color: white;
background-image: linear-gradient(red, red), url(http://placekitten.com/1000/750);
background-blend-mode: screen, luminosity;
}
<div class="test"></div>
A way to have this effect as a reusable class. The image is already on the element, and we just set the class to set the effect and a separate class for the color.
So the sequence needs to be:
first layer = white
second layer the image, with blend set to luminosity. This way, the luminosity of the image is combined with white, giving white for high luminosity and black for low luminosity (i.e. a grayscale filter)
third layer, a solid color, with blend set to screen. this keeps the white as white, but changes black to the color.
We need to use a pseudo element for the final blend, to make it easy to set all this with an independent class. this will be set with mix-blend instead of background-blend :
#cat {
width: 760px;
height: 560px;
background-image: url(http://placekitten.com/1000/750);
}
.test {
background-color: white;
background-position: 0px 0px;
background-size: cover;
background-blend-mode: luminosity;
position: relative;
}
.test:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
mix-blend-mode: screen;
pointer-events: none;
}
.blue:after {
background-color: blue;
}
<div class="test blue" id="cat"></div>
I have a requirement of displaying multiple images in cards and I want to write some text over them. These are random images uploaded by users, so can be of any color. Need the white text on top of them to not be transparent as shown in attached fiddle.
This is an example fiddle - http://jsfiddle.net/7dgpbLd8/1/
This was my solution to add some gray div over image. But, the text should be always white on a gray background. But it is also shadowed here. It would be great to know how to shadow the actual background so text is readable.
Either follow Lee's advice (though I'd recommend adding some padding) or use text-shadow, like so.
div {
width: 100px;
height: 100px;
margin: 20px;
text-align: center;
line-height: 100px;
color: white;
text-shadow: 0 1px black;
}
.dark {
background: #333;
}
.light {
background: #ccc;
}
<div class="dark">Some text</div>
<div class="light">Some text</div>
Or you can ever merge our two approaches.
div {
width: 100px;
height: 100px;
margin: 20px;
text-align: center;
line-height: 100px;
}
.dark {
background: #333;
}
.light {
background: #ccc;
}
span {
color: white;
text-shadow: 0 1px black;
background: #333;
background: rgba(0, 0, 0, 0.18);
padding: 4px 8px;
}
<div class="dark"><span>Some text</span></div>
<div class="light"><span>Some text</span></div>
The problem with your post is that you set the opacity. However, when you lower the opacity, not only does the background change, but also all its content. In other words, the text also has a lower opacity in your fiddle. In my fiddle, presented above, you do not have this problem because you use rgba. RGBA uses the default RGB color representation, but adds an alpha layer component to that (i.e.: opacity). This means that you can add a color that is (semi-)transparent.
It works in the same way as opacity, simply add the value you want for the color (let's say 0.8), and add it after the default rgb values. An example: RGB for white is 255,255,255 and for black 0,0,0. If you want those to have an opacity of 0.8, add 0.8 at the back: rgba(255,255,255,0.8) or rgba(0,0,0,0.8) respectively. By doing this, only the opacity of the background will change, and not that of the text. For an example, see the examples above.
I would put the image(s) in a div with a dark background, then lower the opacity of the images themselves, darkening the images so you can read the text. This way you can also darken the image on hover for better readability.
http://jsfiddle.net/3w34k1ea/
.img-wrapper{
width: 100%;
height: 100%;
background: #000;
}
img {
width: 100%
height: 100%;
opacity: .5;
}
img:hover{
opacity: .3;
}
p {
color: white;
position: absolute;
top: 15px;
left: 15px;
font-size: 20px;
}
I would use text shadow in your position but insteed of one I would experiment with multiples shaodws till reaching the best solution. For example:
text-shadow: 2px 2px 5px rgba(0,0,0,0.8), 0px 0px 2px rgba(0,0,0,1);
FIDDLE
The easiest way and best result at the same time is simply using a semi-transparent overlay, e.g.: https://jsfiddle.net/zmpwunr7
<div class="box">
<div class="overlay top">
text
</div>
<img ... />
</div>
.box {
position: relative;
}
.box .overlay {
background-color: rgba(0, 0, 0, 0.50);
color: rgb(255, 255, 255);
position: absolute;
}
.box .overlay.top {
top: 0px;
}
Put the text inside a <span> tag and give it a class, then in your CSS file:
span.your-class {
background:rgba(255,255,255,0.5);
padding:1em; // Adds a nice comfortable spacer between the text and the div edge
}
This will put the text inside a semi-transparent box ontop of the image.
Experiment with your text colour, and the background colour until you're happy.
Here's an example: http://jsfiddle.net/9svp8qoh/
There are some answers here that will help you make the text more readable. But they do not darken the background images which is what you asked for. You could achieve this by using css filters, e.g. the brightness filter:
img {
filter: brightness(20%);
}
A value of 0 means a completely black image, a higher value will bring you a brighter result. Example: http://codepen.io/anon/pen/OPqRJK
Attention: only Firefox supports at the moment the unprefixed version, IE has no filter support. See http://caniuse.com/#feat=css-filters
If you need to support these browser, have a look at the answer from BenSlight. It's basically the same solution.
For further reading: there's a nice article on css-tricks.com explaining all possibilities we have with css filters: https://css-tricks.com/almanac/properties/f/filter/
I had this scenario once. I compromised creating span with opacity 0.5 and giving dark background, and then placing the text. If I understood you question correctly this could be a solution for you.
You can add opacity only to background:
rgba(255,0,0,0.5)
Check this post
you can use background property of css where in you can give color and image path
eg :-
background:#FFFFFF url("image path");
This will add background color to image.
Is there a way to make my background transparent without using RGBA so that I can change the color using Sass variables later without making the contained text transparent?
$dark: #000;
$highlight: blue;
nav {
width:100%;
background: $dark;
opacity: .5;
ul {
li {
margin: 0 3%;
a {
display: block;
font-size: 1.4em;
&:hover {
color:$highlight;
}
}
}
}
}
You can use Sass functions to add transparency to a color.
background: rgba($dark, 0.5);
or
background: transparentize($dark, 0.5);
or
background: fade-out($dark, 0.5);
Sass has lots of handy functions for manipulating colors, strings, numbers, selectors, and more.
Makes not much sense to not use rgba.
Both opacity and rgba() are not supported by IE8, just 9 and above (if you are required to support it). With the exception that IE8 accepts the filter, that can be somewhat of a workaround to transparency.
If that isn't the case, and you simply don't want to use because it's annoying to convert hex to rgb, (which I too find annoying), no fear! SASS accepts a HEX #000 as a value for rgba and converts it properly, like this:
$dark: #000;
background-color: rgba($dark, .5); //outputs background-color: rgba(0,0,0,.5); in this case
But anyways, here is an approach with pseudo-elements after/before (you choose). Refer to the comments:
$dark: #000;
$highlight: blue;
nav {
width:100%;
background-color: transparent; //transparent or you won't see the color behind!
//needs to be relative or after will go outside nav bounds
position: relative;
z-index: 0;
//using after (or before) to fake the bg
&::after { //if you need to support IE8, use single colon instead. Standard is :: but IE8 just supports with one
content:"";
display: block;
//those two really could be just be
//"background-color: rgba($dark, .5);" you know
background: $dark;
opacity: .5;
//filter here if you want IE8 support
//making it fill entire nav
bottom: 0;
top: 0;
left: 0;
right: 0;
position: absolute;
//behind our nav
z-index: -1;
}
//ul and so on here
}
you can use RGBA with sass. Why do you not want to use RGBA?
background: rgba(0,0,0,0.5);
body{
color:red;
background-image: url("image.jpg");
background: rgba(255,255,255,.85);
}
This my css code for semi-transparent. It's not working. It completely overwrite my image. So, I tried to put background: rgba(255,255,255,.85); into other section like h2 or p. It works fine.
Does anyone can tell me what is going on? Thank you.
Your shorthand background: property overwrites the previous longhand background-image property.
Do this instead:
body {
color: red;
background: rgba(255,255,255,0.85) url("image.jpg");
}
Alternatively, use two long-hand properties:
body {
color: red;
background-color: rgba(255,255,255,0.85);
background-image: url("image.jpg");
}
Your short-hand property of background overrides the background, so you need to do like this:
body{
color:red;
background: url("image.jpg") no-repeat;//now it works which doesn't support rgba
background: rgba(255,255,255,.85);
}
you can also get the transparent image using pseudo element. Have a look at DEMO.
div{
color: red;
height:100%;
width:100%;
}
div:after
{
content: "";
display:block;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
opacity: 0.5;
-moz-opacity: 0.5;
background: url("http://lorempixel.com/700/700/") no-repeat;
}
#user3822798 You are not understanding background property correctly.
When you use,
body{
color:red;
background-image: url("image.jpg");
background: rgba(255,255,255,.85);
}
background property which is at las overrides background-image, thus you see only color.
But as mentioned by #Dai if you use,
body {
color: red;
background-color: rgba(255,255,255,0.85);
background-image: url("image.jpg");
}
You can get both image & color at same time, but since your image is in jpeg format, it is opaque & you can not see color behind it.
to see it use a small background image & use this code,
body {
color: red;
background-color: rgba(255,255,255,0.85);
background-image: url("image-small.jpg");
background-repeat:no-repeat;
background-position:center center;
}
You can see transparent white color & your small image in middle.
Now my question is, why the hell do all this things? can't you simply use a transparent PNG?
Make a transperant PNG Image & use following code:
body {
color: red;
background:url("image.png");
}
how do i get it so that i reduce the opacy only for the BG color and not the content, and not the border.
css:
.ghost-btn-small {
text-decoration: none;
text-align: center;
margin: 320px auto 0 auto;
background-color: #000000;
opacity: 0.3;
border: 1px solid #fff;
height: 70px;
width: 280px;
line-height: 36px;
}
there has to be a quick and easy way?
Instead of copying codes why don't you read this:
When working with CSS colors, you can specify the color in several ways:
Color Name
background-color: red;
RGB Color Value:
background-color: #ff0000;
rgb function: this function accepts the three colors Red, Green and Blue as parameters either as integer or as percentage
background-color: rgb(255,0,0);
background-color: rgb(100%,0,0);
rgba function: The rgba function is similar to the rgb function except that is has the alpha parameter which represents the amount of transparency to use. It must be between 0.0 and 1.0 where 0.0 is invisible and 1.0 is fully opaque.
background-color:rgba(255,0,0,0.5);
background-color:rgba(100%,0,0,0.2);
hsl function: this is the hue-saturation-lightness function, where hue is an angle of the color circle, saturation is the amount of color to provide, and lightness is the amount of lightning to provide. This is typically used to produce matching colors by keeping the hue value the same and adjusting the saturation and the lightness.
background-color: hsl(0,100%, 50%);
Of course you could as well set the opacity property to set the amount of transparency an element has.
Hope this will help.
Try
background-color:rgba(0,0,0,.3);
instead of
background-color:#000000;
opacity: 0.3;
This applies only for background-color, not for content
.ghost-btn-small {
text-decoration: none;
text-align:center;
margin: 320px auto 0 auto;
background-color:rgba(0,0,0,0.3);
border: 1px solid #fff;
height: 70px;
width:280px;
line-height: 36px;
}
Just Copy this it will work. If you will give opacity attribute to class it will apply for whole class that is why your border was catching the opacity.