I'm not sure what the MS Word effect is called, when you set an image as the document's background, where it lowers the opacity and changes the color palette a bit.
Is there any way I could do that in CSS? Or an off-topic question, in case it's not possible, does anyone know the name of the effect?
Image with effect:
Original image (minus the text):
I'm no image professional, but I'd have said the image had a higher saturation and contrast, which can be achieved using the CSS filter property. Use opacity along with this and you have your effect:
.effect {
-webkit-filter: contrast(200%) saturate(200%);
opacity: 0.2;
}
<img src="http://i.stack.imgur.com/6ZTgY.jpg">
<img src="http://i.stack.imgur.com/6ZTgY.jpg" class="effect" >
Alter the values passed to get your desired change.
Note the some-what lack of filter support at the moment.
Related
I have a <div> which contains a bunch of <p>s and would like to have an opaque background image behind text, scaled to fill the entire <div>. I.e. no matter how much text I add or remove, the image should grow or shrink to cover the entire background of the <div>.
And only the image should have opacity. Text within the div should be solid black.
How do I do that, please? (and do I have to worry about browsers which do not support CSS3?)
[Answer] from o.p.
I stepped back and looked at the problem another way and found an answer which is cross-browser and does not need CSS3.
I fired up The Gimp and added opactiy into the image itself! Exactly what I sought to do, with no fancy CSS3 necessary ;-)
Thanks very much for your help, #JSW189. I hope you don't mind me posting in your answer, but this is the solution which I chose.
You want to use the background-image property to add the image, then background-size:100% to have the background image fill the entire div.
div {
background-image:url('image_url_goes_here.jpg');
background-size: 100%;
}
JS Fiddle Example.
Further, if you would like to toggle with the opacity, you can use the opacity property. It is set to opacity:1 (opaque) by default, but you can change that by toggling the opacity between 1 and 0. So, for example, if you want an opacity of 50%, you would use opacity:.5.
Opacity JS Fiddle Example.
Note that background-size is a CSS3 property. You can see a browser compatibility chart here. However, this problem can be solved by libraries like modernizr.
I have a div element to which I set opacity: 0.7; in the CSS file because I would like the text inside it to be opaque. I display some images inside this div, but the images appear with the inherited opacity property. The result are opaque images.
Is it possible to give a CSS property to the images not to inherit the opacity of the div that contains them? If not, how can I avoid having the images opaque?
Thanks.
If you're using opacity to allow the text to have partial transparency, then simply set the color of the element:
#elemId {
color: rgba(0,0,0,0.7);
}
This lets you avoid adjusting the opacity property, and should work in all browsers that support the opacity property, too.
Only way is with positioning. Here is a great article from CSS Tricks: http://css-tricks.com/non-transparent-elements-inside-transparent-elements/
Use position: relative; and a top value to make elements over one another.
If you are just trying to make a background transparent then you can use the rgba() value in your background.
Edit:
Here is a crazy idea. You could use PHP GD to render a image with a gray backround(making transparent) with white text that you want to display in the correct position. Then use a mask-box-image or mask-image CSS property and set it to the rendered image.
If of course your content is not dynamic then you could make the image in Photoshop/whatever program.
Anti-aliasing would not be the same from the browser to the GD render but is the best hack if you do not want to use positioning.
Add the following code in your css
z-index:111
it works.
I tried with text just with: opacity:3;filter:alpha(opacity=300); and it works, but not with images,
any alternative?
If you are trying to make the images darker you cannot do that with opacity higher than 100%. 100% opacity is the most visible, the opacity scale (like in photo/video editing) is from 0 (completely transparent) to 100 (full opacity).
You can however give your image a filter property which will overlay on top of the image. That filter property can do a lot but in this case you would benefit most from the brightness setting of the filter property. 100% brightness will show your image in it's original form, whereas the lower the percent of the brightness the darker the filter will get and thus the darker your image.
It would look something like this:
.slide-img{
width: 100%;
height: 20%;
filter: brightness(50%);
}
Even it it's possible to set opacity values above 100%, there is no benefit to doing so. Once something is 100% opaque it cannot visibly become any more opaque than that.
What is it that you are trying to accomplish by setting the opacity above 100%? There may be some other property that will give you the desired effect.
Image Transparency
I don't think opacity=300 makes any sense; try opacity=30?
Likewise where you are saying opacity=3, you should try opacity=0.3
I have a div with 60% opacity, to show part of a background image behind the div. Because the opacity is at 60%, the text in that div appears as grey.
Is there anyway to override this level and make the text appear black?
Any advice appreciated.
Thanks.
Set the opacity on the background rather than the element.
background-color: rgba(255,0,0,0.6);
A while ago I wrote about how to achieve this in a backwards compatible way.
I've experimented with this in the past on my own website. By far the easiest method to achieve what you want is to create a single-pixel .PNG image with its opacity set to less than 100% (i.e., partly-transparent) and use it as a background image. By default it will fill the whole containing element - make sure that the CSS background-repeat attribute is set to 'repeat' if it doesn't.
Doing things this way you don't have to set transparency on the containing element itself, hence the opacity of its text will be unaffected.
Amazingly, there is just the tool for making a semi-transparent single-pixel .PNG here.
The opacity applies to the whole div and all of its children. Unfortunately, you cannot undo that opacity, but only add more. And besides that, there's no way for CSS to select the text inside an element.
In your case, the best solution is to apply a transparent background image (with PNG) to your div block, like a white one pixel image with 60% opacity.
Another solution would be to use different boxes and positioning, like described in this tutorial by Steven York.
this should answer just about all of your questions: http://css-tricks.com/non-transparent-elements-inside-transparent-elements/
The simplest solution would be to create a semi-transparent PNG with the correct colour and use that as a background image.
Another solution that may be possible depending on your layout is to put the text in a separate layer and position that over the top of the semi-transparent part. Something like this would work:
<div style="position: relative; background-image: url('your_image.jpg')">
<div style="opacity: 0.5; background-color: #fff; position: absolute"></div>
<div style="position: absolute">The text to go on top</div>
</div>
You'd need to add your own positions/sizes (the top, left, width and height properties) as appropriate.
I would like to know if there is any way I can apply 100% transparency to text so that we can see the background picture of the page within the characters in the text.
i.e. imagine I’ve got a <div> with a white background, and a background image on <body>. I’d like to set the text inside the <div> so that the background image on <body> can be seen through the text, despite the white background on the <div>.
I could probably use an inverted font but I would prefer a better way to do it if there is one.
Does it have to be dynamic? The only way to do that is with an image with transparency (GIF or, better, PNG).
I'm not sure if this is what you want, but will explain it anyway.
Situation: you have a non plain background that you want to bee seen through your text.
Solution: no CSS is coming to the rescue for this. You'll have to use your trusty image editor to create a layer with text, and another layer that will be the negative of your text
This could allow you to have some interesting effects, but if you want it to be dynamic, you'll have to generate the images on the fly serverside.
This kind of trickery is currently impossible with pure CSS (might be possible with Javascript).
Edit
Seeing Paul's find on webkit got me thinking on how to fake that behavior in Firefox, Opera and IE. So far I've had good luck using the canvas element on Firefox, and I'm trying to find some behavior in filter:progid:DXImageTransform.Microsoft.
So far with canvas, this is what I did
<html>
<body>
<canvas id="c" width="150" height="150">
</canvas>
<script>
ctx = document.getElementById("c").getContext("2d");
// draw rectangle filling the canvas element
ctx.fillStyle = "red";
ctx.fillRect(0,0,150,150);
// set composite property
ctx.globalCompositeOperation = 'destination-out';
// the text to be added now will "crop out" the red rectangle
ctx.strokeText("Cropping the", 10, 20);
ctx.strokeText("red rectangle", 10, 40);
</script>
</body>
</html>
by using a detination-out compositing and drawing text on the canvas.
I’m not exactly clear what you’re asking (100% transparency means that something’s invisible, and invisible text isn’t generally a great idea), but in general:
The CSS opacity property applies to an entire element, not just its text. So if you have this HTML:
<div class="opacity-50">
This is a div with a background colour and 50% opacity
</div>
And this CSS:
.opacity-50 {
background: #ccc;
color: #000;
opacity: 0.5;
}
Then both its background and its text will have 50% opacity.
rgba colour values allow you to specify semi-transparent colours. So, if you have this HTML:
<div class="text-opacity-50">
This is a div with semi-transparent text
</div>
And this CSS:
.text-opacity-50 {
background: #ccc;
color: rgba(0,0,0,0.5);
}
Then only its text will have 50% opacity.
I think rgba colour values are supported by slightly fewer browses than opacity.
Ah — if you’re talking about “punch-through” transparency, no, CSS doesn’t do this.
Except for WebKit (the rendering engine in Safari and Chrome), which has a totally custom, made-up-by-Dave-Hyatt, not-even-in-CSS-3 property value, -webkit-background-clip: text;.
No other browser other than Safari and Chrome supports it.
You can spent the time to make your own font with InkScape and IcoMoon and make a negative knocked out font, then your letters can be see trough! I used this technique for some see trough Icons.
Why not try to set the DIV's background image to a completely transparent GIF?
http://www.pageresource.com/dhtml/csstut9.htm
Using a .png without background is a good method. In Photoshop you can save for the web.
or in css:
#div
{
background:transparent;
color:whatever;
}