I have 2 .png pictures with a transparent background.
I would like to add them to my page, at the moment I use
<div class="thumbnail">
<img src="foo.png">
</div>
but when I open the page (through chrome) the background color is white, and I don't want it white, I want it to be transparent.
I would like not to use CSS, but if there is no other option so I'll do it.
Please note that, if you are not giving any colours for the background, then by default it will be white on most browsers! If you are using chrome, you can do like this:
body {
background: url("transparent1.png") transparent,
url("transparent2.png") transparent;
}
As said in the comment by KittMedia, if you are targetting new browsers, replace transparent with:
body {
background: url("transparent1.png") rgba(0, 0, 0, 0),
url("transparent2.png") rgba(0, 0, 0, 0);
}
This way, you can overlay two images and keep them transparent too. Is this what you are expecting?
Related
I have a form in which the autocomplete imposes a blue background color. My form has a semi-transparent white background color. I was able to change the color of the autofill to white using this CSS property
-webkit-box-shadow: 0 0 50px white inset;
Unfortunately, if I set a semi-transparent color, the CSS property no longer works. Can anyone solve this problem? I also tried different properties with !important found here.
I assume that you mean by "the CSS property no longer works" that the original browser autofill color is partly visible behind the new semi-transparent color (as in, the box-shadow color is acting like an overlay on the original color).
What you could do, is chain multiple box-shadows. Setting the last one as a solid color, like so:
:-webkit-autofill,
:-webkit-autofill:hover,
:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.5) inset, 0 0 0px 1000px #ff0000 inset;
}
I've created an image gallery using Bootstrap grid with figure and fig-caption tags, and overlaid each image with the caption text. Now I'd like to darken each image and make the text more visible. I know how to do this with a single background image, but I can't work out how to manage it for every image in my grid. My links to image srcs are in the HTML, so I haven't been able to use the background-image property on the image link in CSS, as I have previously. Do I need to change my set-up and link to images in the CSS, or can it be done with my images in HTML?
Thus far I've set a linear-gradient to the background property of the images, but that only puts the gradient behind the images.
Example of the code that works for background images:
#hero-image {
background-image:linear-gradient(rgb(60, 60, 60), rgba(17, 17, 17, 0.5)), url("https://cdn.pixabay.com/photo/2017/05/09/09/15/edinburgh-2297668_1280.jpg");
width: 100vw;
height: 100vh;
background-size: 100% 100%;
}
#media only screen and (min-width:600px) {
#hero-image {
background-image:linear-gradient(rgb(103, 98, 98), rgba(17, 17, 17, 0.5)), url("https://cdn.pixabay.com/photo/2019/04/22/08/58/edinburgh-4146031_1280.jpg");
}
}
<div id="hero-image">
<div class="hero-text-box">
<h1>Literary Edinburgh</h1>
<h4>Scotland's capital in books</h4>
<button id="hero-button" type="button" class="btn btn-primary btn-lg .btn-block">Get me reading!</button>
</div>
</div>
Just got a suggestion from a course tutor that's working really well for me so sharing it here.
I've now used the filter property and set its value to brightness(50%). So the CSS rule I applied to my images is:
filter: brightness(50%);
Found this - might help:
.outline-font {
color: yellow;
text-shadow:
-1px -1px 0 black,
1px -1px 0 black,
-1px 1px 0 black,
1px 1px 0 black;
}
use:
<h1 class="outline-font">I'm yellow font with black outline!</h1>
play with the colors and "widths", look up "text-shadow", good luck!
I have a div with text and background which after scrolling down is going over the home slider.I want to have some transparency. Everything is ok in Firefox where that layer is transparent with some opacity set. But in chrome and opera it is solid and slider is not visible under. I use:
background:rgba(255,255,255,0.5);
i event tried to use transparent PNG but it also is solid.Problem preview
How can i make a background transparent in Chrome and Opera?
I know it is an old question but searching for the same problem this poped up on top for me.
So I had the same problem - working perfectly in Firefox but on Chrome no opaciy at all.
What I did and its working perfectly (at least for now) it to change from RGBA colors to HSLA colors.
In my case changed the following :
background-color: rgba(0, 0, 0, 0.75);
to
background-color: hsla(0, 0%, 0%, 0.75);
I have no idea why chrome prefers the HSL colors and opacity.
Also a good point to consider, HSL colors are supported in newer browser versions.
Is it possible to replace a specified color with transparency in CSS?
We have an image with white (255,255,255) parts. I am trying to use the rgba function to convert the white parts to transparency, but it's not working.
This image lies on top of another image, a blue background. The white shows through.
.logo {
background: url("../images/MasterLogo_resized.png") no-repeat scroll center
top rgba(255, 255, 255, 0);
}
.logo {
background: url("../images/MasterLogo_resized.png") no-repeat scroll center
top rgba(255, 255, 255, 0.5);
}
You cannot change the properties of a PNG using css.
But, if your PNG is simple enough to be converted to an SVG (using a graphics program), you could use CSS to manipulate transparency and colors:
http://webdesign.tutsplus.com/articles/manipulating-svg-icons-with-simple-css--webdesign-15694
I would like to know if there is a way to add transparency to text in forums.
I know of using [color=transparent] but that makes it fully transparent
Is there a proper coding to add transparency like 50% or so?
Example
[color=#FF0000] red [/color]
You can use CSS:
.transparent_text {
color: gray; /* fallback */
color: rgba(0, 0, 0, 0.5);
}
and
<div class="transparent_text">Hello</div>
or
<div style="rgba(0, 0, 0, 0.5);">World</div>
The last value is the transparency (this is semi-transparent-black). 0 for completely transparent, 1 for opaque
Example: http://jsfiddle.net/xUgYP/