I saved the image as a transparent png but nothing I can do seems to fix it!?! Any ideas???
It should look like this:
Here is a copy of the image in GIMP showing that it's indeed transparent:
finally, Some good old code:
The Markup:
<form class="search" action="search.php"><input class="search" type="text" name="search" id="searchbox"/></form>
Search Box CSS:
.search, .search:active, .search:focus, .search:visited {
position: absolute;
color: #fff;
top: 3px;
width: 368px;
right: 9%;
font-size: 28px;
z-index: 3;
border-radius: 20px;
/* box-shadow: inset -2px 0px 1px rgba(0,0,0,.8); */
text-indent: 10px;
text-shadow: 0px -2px 3px rgba(0, 0, 0, .7);
background-color: #00D4C7;
}
The Search icon css itself:
Pseudo ::before element
.search:before {
content: "";
position: absolute;
top: 7px;
left: 268px;
background-image: url("images/icon-search.png");
background-color: rgb(0, 185, 171);
width: 46px;
height: 30px;
z-index: 4;
}
Note: If I remove the class search from form, It removes my image, if I remove class search from the input element it still renders with that funky shade over my image...Any ideas?
Edit 1: If I do as suggested by setting the explicit dimensions of the image (as I did for other pseudo elements with no problem) it does not resolve my issue. I've already submitted the project so at this point it's a matter of me wanting to know what happened and how I can fix this. I resorted to a css hack that changed the brightness to a closer match [with a faint outline still 😞 ]
Edit 2: Show me the JS Fiddle!
you did give your image a background-color: rgb(0, 185, 171); what is #00b9ab
and the searchbox background-color: #00D4C7; what is rgb(0, 212, 199)
My image itself was not truly transparent. There is is a small opacity channel that causes that grey haze to appear on a non-white background. I caught wind of this when posting to imgur....and confirmed it for sure when I actually made a copy of the layer (in photoshop) using select by color.
Solution: Check your images...to do this, load it onto a window by itself and set the html body to a non-white color. Wish I thought to do this before submitting this:
This might be happening because your background image size is different than its container's, .search::before, size. And/or because your .search::before background-color is a different hex value.
Try this:
Add background-color: transparent; and background-size: 46px 30px; to .search::before. This will make it so that if your background image is smaller than the container, the rest of the space will be transparent and set the background image size to be the same as its container, which you have explicitly set.
I found that the images that I was getting from the internet were not truly transparent. This website enabled me to get it to work. https://www.remove.bg/ (the image I used had the checkered background to indicate it was transparent, it just didn't work in the img tag until I used that website.)
Related
Expected behavior
Image tag print image with non-background.
Actual behavior
Print image with white background.
Html
<img src="png/ic-trigger.png" srcset="png/ic-trigger#2x.png 2x, png/ic-trigger#3x.png 3x" class="ic-emergency-on">
Css
Printed with white background.
`
.ic-emergency-on {
position: absolute;
top: 12px;
left: 8px;
width: 20px;
height: 18px;
background-color: #fafafa;
}
`
None-background
`
.ic-emergency-on {
position: absolute;
top: 12px;
left: 8px;
width: 20px;
height: 18px;
background-color: #00fafafa;
}
`
So, what I want is there is another solution that not print white background color?
It seems like the hex value for background-color: #00FAFAFA; is acting weird or isn't a real hex value you can use.
I would just use background-color: rgba(0,0,0,0); for transparency.
#00FAFAFA is not a valid code. A hex triplet is a six-digit, three-byte hexadecimal number used in HTML, CSS, SVG, and other computing applications to represent colors. Kindly recheck your color code.
You are trying to use the 8 digit hex colour (#RRGGBBAA) syntax from CSS Colors Level 4, which is not currently supported in Chrome.
Use decimal notation instead:
background-color: rgba(0, 250, 250, 0.98);
I found simple solution.
Just delete background-color tag
I have the image in the correct folder but I want to add a text box on top of an image and I was told the best way to do it is make the image a background image, but when I followed a tutorial it never appeared?
anyway here is my html
<div class="module">
<h2>blah blah</h2>
</div>
and my CSS
.module {
margin: 10px;
width: 1530px;
height: 717px;
display:block;
background: url('C:\Users\Jason\Desktop\champions\images\shop.png');
background-size: cover;
position: relative;
}
h2 {
position: absolute;
bottom: 100px;
left: 100px;
background: rgba(0, 0, 0, 0.75);
padding: 4px 8px;
color: white;
margin: 0;
font: 14px PTSans;
}
the image is full width of the screen so I am using container-fluid in bootstrap and the text box will be in the middle of the image.
You may call the local file as background like this:
background: url("file://PATH-TO/file.jpg");
Keep in mind that the string inside parentheses should provide a URL to the file.
Also, you have the option to put a path in it.
background: url("PATH-TO/file.jpg");
Change the backlashes. From this...
background: url('C:\Users\Jason\Desktop\champions\images\shop.png');
To this
background: url('C:/Users/Jason/Desktop/champions/images/shop.png');
Cheers.
It looks fine of your css. Try to use firefox or chrome debugger to check if the background image can be loaded or not. Try to change the value of the background-size. Sometimes the background image is too large that you can only see part of it (which may be completely white) on the screen.
Your path is wrong
try this: url('images/shop.png') - if your css is in champions
This is for web dev. When using a 1px border radius on a circle or a square with really rounded corners, the stroke starts to break. If we were to change it to 2px's it would get better and better the more px we add. But is there a way to fix this problem with a 1px stroke?
background: rgba(32, 32, 32, .9);
height: 30px;
width: 30px;
border: 1px solid white;
border-radius: 20px;
:hover {
height: 300px;
width: 200px;
}
Images attached!
add box-shadow: 0 0 1px 0px white inset, 0 0 1px 0px white; that will give you the anti-aliasing you're looking for.
There isn't much you can do about this, unfortunately. That's up to the browser to determine how to render the sub-pixels that make up a curved 1px border. Some browsers will antialias it nicely, others will not.
The only reliable solution is to use images, which is so... 90s. Or something XD Point is, we shouldn't have to do things like that, but sometimes we have to either settle for imperfect rendering, or use outdated methods.
This is common when having a background and a border specified. The only way to fix this would be to have two separate elements, one with the background color and one with the border color with padding equal to the border-width.
See this article for a better explanation.
How can I add a texture over top a solid color background using the pseudo :after element, while keeping the font on top of the texture? Such as that used on the Font Awesome website.
Using the Font Awesome website and CSS: Combine Texture and Color as references I have successfully overlaid the texture onto my background color, but my font appears under the texture as well.
Here is a JSFiddle of my current code: http://jsfiddle.net/EvilClosetMonkey/xuBbq/
I've tried several tweaks, looking over multiple similar effects, but I have not tracked down what I am missing.
How can I bring the font "above" the texture?
Solution:
Taking #JoshC's answer below I added the following CSS, so all contents (not just h1) appear above the texture.
.jumbotron .container
{
position: relative;
z-index: 1;
}
You could simply add a z-index to the h1 element. This would require the element to be positioned; therefore add position:relative too:
UPDATED EXAMPLE HERE
.jumbotron h1 {
color: #fff;
font-size: 100px;
text-shadow: 4px 3px 0 #df4566, 9px 8px 0 rgba(0, 0, 0, 0.15);
position: relative;
z-index: 1;
}
Ive tried to use the rgba() to define a div's background color, but instead of changing the opacity, the fourth value changes brightness (apparently), and rendering the rounded borders black. Here is my CSS, really simple stuff:
#content {
min-height: 200px;
padding: 25px;
border-radius: 50px;
background-color: rgba(169, 245, 208, 0.4);
}
And here is a picture of this issue in both Firefox and Chrome:
Finally, the URL of the site: http://lksonorizacao.com.br/newsite/
The #container parent has a background:#000 set on it. #content’s rounded corners are just revealing that black. rgba() does work the way you think it should.