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
Related
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.
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 want to use a linear gradient background color for a website. For example the gradient color starts from header and ends to the footer. Now the problem is that, since different pages have different amount of content, so the height of the pages varies. So in that case how can I set ending point of the color? For example I want the gradient from #b68d4c to #f6e7cf.
Using an image:
You'll need to figure out the shortest height of content that you want to cover. Then, in your image editor, create your gradient. Since it's linear, you can create it something like 10px wide by 500px tall (if 500px is the shortest height) and repeat it along the x-axis. Once your image is created, you would then write in your CSS:
body {
background:#f6e7cf url(path/to/gradient.jpg) top left repeat-x;
}
Note: the #f6e7cf should be the finishing color of the gradient. What this does is if the page is taller than 500px, it will show the same color as the bottom of the gradient, giving it the illusion that it is continuing.
Using CSS3
As Ryan Casas pointed out, using the Colorzilla Gradient Editor is the most simple way to I've found (although, you don't learn as well because you aren't hand coding, but that's a different discussion). Essentially, you would put your two colors at 0% and 100%, ensure that it's going vertical, and copy the code into the body { } selector.
Use % on the gradients. Here you have a generator: http://www.colorzilla.com/gradient-editor/
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.