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");
}
Related
I have panel which I colored blue if this panel is being selected (clicked on it). Additionally, I add a small sign (.png image) to that panel, which indicates that the selected panel has been already selected before.
So if the user sees for example 10 panels and 4 of them have this small sign, he knows that he has already clicked on those panels before. This work fine so far. The problem is now that I can't display the small sign and make the panel blue at the same time.
I set the panel to blue with the css background: #6DB3F2; and the background image with background-image: url('images/checked.png'). But it seems that the background color is above the image so you cannot see the sign.
Is it therefore possible to set z-indexes for the background color and the background image?
You need to use the full property name for each:
background-color: #6DB3F2;
background-image: url('images/checked.png');
Or, you can use the background shorthand and specify it all in one line:
background: url('images/checked.png'), #6DB3F2;
For me this solution didn't work out:
background-color: #6DB3F2;
background-image: url('images/checked.png');
But instead it worked the other way:
<div class="block">
<span>
...
</span>
</div>
the css:
.block{
background-image: url('img.jpg') no-repeat;
position: relative;
}
.block::before{
background-color: rgba(0, 0, 0, 0.37);
content: '';
display: block;
height: 100%;
position: absolute;
width: 100%;
}
Based on MDN Web Docs you can set multiple background using shorthand background property or individual properties except for background-color. In your case, you can do a trick using linear-gradient like this:
background-image: url('images/checked.png'), linear-gradient(to right, #6DB3F2, #6DB3F2);
The first item (image) in the parameter will be put on top. The second item (color background) will be put underneath the first. You can also set other properties individually. For example, to set the image size and position.
background-size: 30px 30px;
background-position: bottom right;
background-repeat: no-repeat;
Benefit of this method is you can implement it for other cases easily, for example, you want to make the blue color overlaying the image with certain opacity.
background-image: linear-gradient(to right, rgba(109, 179, 242, .6), rgba(109, 179, 242, .6)), url('images/checked.png');
background-size: cover, contain;
background-position: center, right bottom;
background-repeat: no-repeat, no-repeat;
Individual property parameters are set respectively. Because the image is put underneath the color overlay, its property parameters are also placed after color overlay parameters.
And if you want Generate a Black Shadow in the background, you can use
the following:
background:linear-gradient( rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("logo/header-background.png");
You can also use short trick to use image and color both like this :-
body {
background:#000 url('images/checked.png');
}
really interesting problem, haven't seen it yet. this code works fine for me. tested it in chrome and IE9
<html>
<head>
<style>
body{
background-image: url('img.jpg');
background-color: #6DB3F2;
}
</style>
</head>
<body>
</body>
</html>
The next syntax can be used as well.
background: <background-color>
url('../assets/icons/my-icon.svg')
<background-position-x background-position-y>
<background-repeat>;
It allows you combining background-color, background-image, background-position and background-repeat properties.
Example
background: #696969 url('../assets/icons/my-icon.svg') center center no-repeat;
This actually works for me:
background-color: #6DB3F2;
background-image: url('images/checked.png');
You can also drop a solid shadow and set the background image:
background-image: url('images/checked.png');
box-shadow: inset 0 0 100% #6DB3F2;
If the first option is not working for some reason and you don't want to use the box shadow you can always use a pseudo element for the image without any extra HTML:
.btn{
position: relative;
background-color: #6DB3F2;
}
.btn:before{
content: "";
display: block;
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
background-image: url('images/checked.png');
}
Here is how I styled my colored buttons with an icon in the background
I used "background-color" property for the color and "background" property for the image.
<style>
.btn {
display: inline-block;
line-height: 1em;
padding: .1em .3em .15em 2em
border-radius: .2em;
border: 1px solid #d8d8d8;
background-color: #cccccc;
}
.thumb-up {
background: url('/icons/thumb-up.png') no-repeat 3px center;
}
.thumb-down {
background: url('/icons/thumb-down.png') no-repeat 3px center;
}
</style>
<span class="btn thumb-up">Thumb up</span>
<span class="btn thumb-down">Thumb down</span>
Assuming you want an icon on the right (or left) then this should work best:
.show-hide-button::after {
content:"";
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
background-size: 1em;
width: 1em;
height: 1em;
background-position: 0 2px;
margin-left: .5em;
}
.show-hide-button.shown::after {
background-image: url(img/eye.svg);
}
You could also do background-size: contain;, but that should be mostly the same. the background-position will depened on your image.
Then you can easily do an alternative state on hover:
.show-hide-button.shown:hover::after {
background-image: url(img/eye-no.svg);
}
You can try with box shadow: inset
.second_info_block {
background: url('imageURL');
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.4);
}
<li style="background-color: #ffffff;"><img border="0" style="border-radius:5px;background: url(images/picture.jpg') 50% 50% no-repeat;width:150px;height:80px;" src="images/clearpixel.gif"/></li>
Other Sample Box Center Image and Background Color
1.First clearpixel fix image area
2.style center image area box
3.li background or div color style
body
{
background-image:url('image/img2.jpg');
margin: 0px;
padding: 0px;
}
I am trying to make some RGB text, and that works, however when I am trying to make a ::selection then it will hide the text, and will for some reason take the background color of the text. I have tried anything I can think of, for now, I am making it for chrome and will later work on firefox.
Research
In my research, I have found that you do not need to use a selector like .rgb. While looking into some documentation/examples, I have encountered multiple weird things, like when I was using .rgb::selection I could not higlight/select ANY text on the screen.
when I looked into W3schools they simply use
::selection {
color: red;
background: yellow;
}
and it works. Ive asked my teachers, and my peers. What none of them understand is why the ::selection is taking the animate property. What I have thought is that when I use -webkit-background-clip that is what is making it not work properly. If this is the case then how can I make it so that it still takes it. When I read some more, I tryed to use !important, this was the closest that I got. It made the text white, but the color was still changing in the background. I've looked here to try to learn how i can use it properly, but i think I have used it correctly. I just cant seem to get the background color to stay one color.
This is what I have gotten so far.
#import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
margin: 0;
padding: 0;
background-color: #1e1e1e;
font-family: 'Montserrat', sans-serif;
}
.rgb
{
position:fixed;
background: linear-gradient(to right, #008AFF, #00FFE7);
animation:animate 10s forwards infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
::selection !important{
background: red;
color: white;
}
#keyframes animate
{
0%, 100%
{
filter:hue-rotate(0deg);
}
50%
{
filter:hue-rotate(360deg);
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="rgb">Welcome to my webpage</h1>
</body>
</html>
I've looked all over this site for something or someone with this problem but it seems I'm a first.
To escape the filter' a somewhat hacky way of doing it might be to have a second copy of the heading which is placed over the original and is actually the element for which selection takes place.
Its text and background are transparent until there is a selection at which point the selection (only) becomes white and red respectively.
#import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
margin: 0;
padding: 0;
background-color: #1e1e1e;
font-family: 'Montserrat', sans-serif;
}
.rgb {
position: fixed;
background: linear-gradient(to right, #008AFF, #00FFE7);
animation: animate 10s forwards infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.shadow {
color: transparent;
position: absolute;
top: 0;
left: 0;
background-color: transparent;
}
.shadow::selection {
background: red;
color: white;
}
#keyframes animate {
0%,
100% {
filter: hue-rotate(0deg);
}
50% {
filter: hue-rotate(360deg);
}
}
<h1 class="rgb">Welcome to my webpage</h1>
<h1 class="shadow">Welcome to my webpage</h1>
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>
I have a problem with background:
I have 3 child elements.
Each of them got background-image by #nth_image ID.
Also they got background gradient by .background-gradient class.
All png images got alpha channel
The problem is that background-image overwrite background gradient.
As result I want png image on front and gradient on background
.background_gradient {
background: -webkit-radial-gradient(top, ellipse cover, #f9f9f9 0%,#eaeaea 100%);
}
#first_image {
background: url(images/img01.png);
}
#second_image {
background: url(images/img02.png);
}
#third_image {
background: url(images/img03.png);
}
<div class="parent">
<div id="first_iamge" class="background_gradient"></div>
<div id="second_image" class="background_gradient"></div>
<div id="third_image" class="background_gradient"></div>
</div>
Both the gradient and image background utilize the same image property of the background. Its as if you are writing it like this:
.class {
background-image: url('/path/to/image.png');
background-image: -webkit-radial-gradient(top, ellipse cover, #f9f9f9 0%,#eaeaea 100%);
}
so basically you are overwriting the image part of the background with the gradient or vice versa depending on which rule takes precedence over the other.
My suggestion would be to style your markup differently. Have a div inside of the div with the background you want.
<div class="background-gradient">
<div id="first-background"></div>
</div>
If you want to mix 2 types of background on a single element, my suggestion is to use css pseudo element.
You could use the before pseudo element having the same size as your element for your gradient part.
You could have something like this:
.background_gradient {
position: relative;
}
.background_gradient:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index:-1;
background: -webkit-radial-gradient(top, ellipse cover, #f9f9f9 0%,#eaeaea 100%);
}
#first_image {
background: url(images/img01.png);
}
#second_image {
background: url(images/img02.png);
}
#third_image {
position: relative;
background: url(images/img03.png);
}
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.