I have it in my mind to create:
A patterned fixed background
A white background layer overtop of the patterned background
"transparent" text that is also transparent through the white background so the patterned background as the text.
For those wiser than me out there... is this even possible? If so how?
The text transparency is easy enough rgba(0,0,0,0.1) but I can't get it beyond the white layer to the pattern.
The code so far:
#inner-header {
background: url('../images/white.png'), url('../images/angusplaid.png');
position: fixed;
z-index: 1;
}
#logo a {
color: rgba(0,0,0,0.1)
}
Is there a way to make the white background transparent only where the text is? I have my doubts but would love to have it solved either way.
Cheers.
You have various options:
The first is with CSS background-clip.
Browser support: See http://caniuse.com/#search=background-clip (All & IE 8+, -webkit- prefix for Android 2.x)
How-to (with fallbacks & catches): http://css-tricks.com/image-under-text/
The second is with SVG (SVG.js)
Browser support: See https://svgdotjs.github.io/compatibility/
How to: See https://svgdotjs.github.io. Copy the example on the homepage. The <name> you enter in var drawing = SVG('<name>') must be the ID of the div you want to ouput to.
I'm sure some text to bitmap options must exist too.
Related
I have a website created in MVC4.
I have an image. And I only want to show the shape (an arrow) of the image. And I don't want to show the rest of the image (the background).
<= only the white background of the arrows has to be disappeared.
How do you do that?
I tried this, but with this the whole image will disappear, in stead of a part of it:
.images_top {
width: 30px;
text-align: center;
vertical-align: top;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity:0;
}
First of all I think you can use a PNG with alpha channel.
If this is not possible look at this tutorial about how to clip images by using the SVG clip-path.
http://www.html5rocks.com/en/tutorials/masking/adobe/
Even though it is possible only in recent browsers.
Use PNG Images for Transparent Background. You can use any online converter to convert your image to PNG.
Apart from the now better supported PNG (and PNG8 with better fallback-support (looking at IE) and a (configurable) transparent color (index from the pallette) instead of alpha, pretty much just like GIF), there is also GIF which has 'always' been supported (and is no longer cumbered with legal issues, which were only due to it's LZW based compression-algorithm, that one can bypass).
Because of the lack of alpha-channel, creating nice transparent PNG8 and GIF images (without the dreaded overly visual grainy (often white) borders) is somewhat of a true art, infact pixel-art.
The trick is to touch-up the borders between color and transparancy by hand AND to set the image's background-color (when rendering from alpha channel to single color-index transparancy) to the average color of the background the images are going to be used against.
The idea of fatter png's is that they have alpha-channels which will give you (for clear example) nice shades (if you had applied such an effect) that will blend with any background. Now with modern browsers, this works pretty nice (and doesn't require the pixel-art). Pixel-art PNG8/GIF can still have it's place though, for base64 encoded ui-elements, usually small icons.
I've made this fiddle, to demonstrate my problem and question.
I want to have the div that holds all the text have an opacity so that you can see the background (for some reason the background won't show up, works on my machine).
However, in my example all the text has got the same opacity, and that isn't useful for reading.
So basically, how do you have full opaque text, I assume that any child elements will be set to the opacity setting of the parent?
html:
<div class="mainPage">
<h1>Welcome</h1>
<p>... some text ...</p>
</div>
css:
.mainPage {
opacity:0.6;
}
You want to use
.mainPage {
background:rgba(0,0,0,0.6);
}
where 0,0,0 represent black (255,255,255 would be white then) and 0.6 alpha channel
but it is CSS3 so check for the compatibility. Also if you want to this to work in older versions of IE, you could consider PIE CSS
EDIT: As other have mentioned, there are other solutions possible here. To use repeating transparent 1x1px image as your background (which will not work in IE6 if you care?), there are also some php scripts to include to your css that will generate those images automatically for you.
Or another solution would be to use another div with opacity and position it absolutely behind your content, so that div wouldn't contain your content but anyway would be behind.
Opacity affects whole element, so there is no way to do that just using "opacity".
You may set RGBA color to background (last argument is opacity), use transparent BG image or create another div (wrapper) with opacity.
If you need support old browsers, see fiddle with wrapper:
http://jsfiddle.net/nick4fake/N78G8/
<div class="a"><div class="b b2"></div>My text example</div>
<div class="b">My text example</div>
Here b2 is wrapper class.
Also, check this link:
http://css-tricks.com/forums/topic/css-transparency-in-wrappers/
Two possibilities:
Use rgba colours:
background-color:rgba(255,255,255,0.6);
Though you'll want to check the compatibility of this, as it's CSS3. The only browsers that it doesn't work in are Internet Explorer 6, 7, and 8 (and less), so you might be ok using this - it works in all other major browsers.
Make a semi-transparent PNG in Paint.NET, Photoshop, or some other similar program, and use that as the background image:
background-image:url("./myTransparentImage.png");
This has the benefit of working on pretty much every browser, except probably IE6 and the like as it doesn't support alpha transparency.
You'd probably want to make it a 1px × 1px image, to keep the size down, and then that would tile across the whole element.
I am inserting images in TD's in a table with
style="background-image: url("my_url_goes_here")
Then I apply a transparent PNG mask in that TD so that it rounds the image corners
(same colour as background corners, and it shows the middle of the picture)
I wonder if i can write the ALT of the image in the CSS part (style = "background-image: url()) as if I am to write the ALT to the mask image (which is what users can save if they right click on the image), Google will index transparent masks with ALT from the image.
If it's not clear what I'm asking, I will explain further, just ask.
Also, a friend of mine told me just minutes ago over the phone that css3-round borders can be applied to all sorts of things, not just borders, but also images etc. It'd be lovely if this is the case, i'm not sure round borders will round images too, never tried it tho' (exception as usual IE, where they show square).
Thanks.
No, you can't add alt to background images
Yes, it's possible - http://jsfiddle.net/TyFM7/
No css does not suppport the alt tag.
As for rounding image corners with CSS that is possible.
http://www.css3.info/preview/rounded-border/
The alt attribute is meant to provide a text-equivalent in the absence of a loaded resource. It doesn't go in background images, it goes on images, areas, etc.
Source: http://www.w3.org/TR/html4/struct/objects.html#h-13.8
As for rounded corners, border-radius works on images as well - even in IE. If you want to see the current best approach to providing styles for this property, check out http://css3please.com.
img.rounded {
-webkit-border-radius: 12px;
border-radius: 12px;
}
You don't need alt tags for background images, as you wouldn't want these actually indexed.
CSS border radius can be added to most things, here is an example of an image with the border radius added:
Example of image with 30px border radius
This works:
a { color: hsla(0,100%,50%,0.2) }
And this does not:
img { color: hsla(0,100%,50%,0.2) }
Is there something like img { opacity: 1 } that allows to define hsl values to an image?
Text and images are 2 different things.
Text is rendered by the browser with the settings you provide (decoration, size font color ...)
an image is rendered in another way. the browser does not have information about what is on the image, and can therefor not alter the image itself.
Parameters like color etc will not have effect on the image.
By the way, the color parameter defines the text color.
Edit: If you want to apply a "color" to an image, you could create a div with a background image, and then in that div another div with a background color and an opacity. that way the transparant color will be overlayed on the image.
You can apply filters to images in some browsers: Firefox allows you to apply SVG filters to HTML content from CSS, but Chrome, Safari and Opera you'll need to wrap your content in SVG to apply filters to them, here's an example that works in Opera. There might not be an appropriate SVG filter for what you need, but it may be an avenue worth exploring if you have no other alternatives.
In Internet Explorer you might be able to use a static filter.
This works (press 'run code snippet' multi times):
.colors{ filter: hue-rotate(90deg); }
<img src="http://lorempixel.com/300/150/" heigh=150 >
<img src="http://lorempixel.com/300/150/" heigh=150 class="colors" >
degree is 0 to 360.
W3Schools.com: CSS filter Property
The color attribute is used as the drawing colour for text characters, borders and such. It does not apply to bitmap images.
Therefore, it doesn't matter whether you add alpha channel information to your colour value or not: The whole of the declaration doesn't apply.
opacity is different, because it specifies the alpha value for the whole element.
The only way to impact the colors of an image with css is to use opacity to control the alpha channel. Note that you could make a hack to (sort of) change the luminance of your image by placing another element on top of if. Ensure that it covers the image exactly by adjusting position and size, make the background-color black, and set the opacity to 0.5.
http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/
may be these filter help you to change a single image in different color sachem but they also have browser compatibility issue
Supposing no CSS, javascript or other HTML trickery, how does the browser determine the color of the text and background for selected text?
For example, standard white background (#FFFFFF or RGB=255,255,255) with black text (#000000 or RGB=0,0,0) when selected with invert the colors (i.e. black background, white text). How are other colors chosen? For example, when writing a question on this site, the right sidebar has an area "How to ask" with background #FFEFC6 and text #AE0000, which when selected become #3399FF and #FFFFFF respectively.
I would like to know how this is determined (is there an algorithm or just defaults) and is this the same across browsers?
I'd agree with Joshua that the colors come from the system, but I'd disagree about CSS, for example, CSS-Tricks:
::selection { background: #ffcc89; color: #222; }
::-moz-selection { background: #ffcc89; color: #222; }
For more info, see Quirksmode on selection styles.
In my recall, the foreground and background colors are read from system colors and cannot be controlled by CSS.
I believe that each operating/windowing system has its own algorithm. On many, you can select from a few different schemes. It will NOT be the same across all browsers.
For example, in Safari on my Mac, selecting black text on a white background results in a blue rectangle around black text.