I want a black bar behind a png image, and i want the black bar behind the image to have opacity. When I apply opacity to the black bar, his child element (the png image) inherits this opacity. I dont want this to happen.
The site is www.tomasfleiderman.com.ar , where it says "work for money, design for love" I want a black bar behind with opacity.
The code is the following:
<style type="text/css">
p {
font-size:40px;
color: white;
}
#caja
{
}
#fondofrase
{
}
</style>
<!--
<p>Work for money design for love</p>
-->
<div id="fondofrase">
<div id="caja">
<div>
<img src="http://www.tomasfleiderman.com.ar/1.png" alt="Texto" height="60%" width="60%"/>
</div>
</div>
</div>
Thanks
You can do this with a semi transparent background color: http://jsfiddle.net/alessandro_pezzato/LWh75/
background: rgba(0,0,0,0.8);
You can't do that, at least not easily. Child elements have the same maximum opacity as the parent, so a child image can only have an opacity of, say, '0.6' if the parent has an opacity of '0.6'. You could, though, use some absolute positioning techniques to layer the div and the img on top of each other as sibling elements rather than parent-child elements.
<style>
#positioner {
position: relative;
}
#theText,
#theImage {
position: absolute;
top: 0;
left: 0;
}
</style>
<div id="positioner">
<p id="theText">Work for money design for love</p>
<img id="theImage" />
</div>
You could try setting this style on the surrounding <div>-tag:
background: rgba(0, 0, 0, .5);
However, the browser support of rgba is not perfect, and definitely something you should consider before going with this solution. It tends to break in IE versions below 9 (see link: http://css-tricks.com/rgba-browser-support/).
Related
I would like to add some opacity to the text in the element. But I dont want to apply any opacity to the image in the same element. Is there any way to do this ?
What I want to achieve is to show a spinner gif on the element with the text opacity.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
opacity:0.1;
background: url('spinner.gif') no-repeat center !important;
}
</style>
</head>
<body>
<h1>This is a heading.this is text test</h1>
</body>
</html>
I think using another <div> is the wrong solution - please don't spread the div-itis virus. The correct way is to use rgba colors.
h1 {
color: rgba(255, 255, 255, 0.1); /* white with 0.1 opacity */
background: url(...) ...;
}
And by the way, please also refrain from using !important. The "narcissistic css property pattern" is probably the worst thing you can adopt in CSS.
Just put it in a div and set the div to have the background image, and then make the h2 have the opacity,
Example - https://jsfiddle.net/ch6fbqs7/
<div id="text">
<h1>This is a heading.this is text test</h1>
</div>
CSS
#text {
background: url('http://i1-news.softpedia-static.com/images/news2/Picture-of-the-Day-Real-Life-Simba-and-Mufasa-Caught-on-Camera-in-Tanzania-392687-2.jpg') no-repeat center !important;
}
#text h1 {
opacity:0.1;
}
Put the heading h1 into a div, and then use the background image you want as the div background, then you are free to set the h1 text opacity. See below:
<!DOCTYPE html>
<html>
<head>
<style>
.someClass {
background: url('spinner.gif') no-repeat center !important;
}
.someClass h1 {
opacity:0.1;
}
</style>
</head>
<body>
<div class="someClass">
<h1>This is a heading.this is text test</h1>
</div>
</body>
</html>
Nothing wrong with using a wrapper div to hold the background image (as suggested already) if that's what works best for your image, but based on the idea of a simple loading spinner, it may be the cleanest to just use RGBA color for the text:
https://jsfiddle.net/kyjp4vf9/
Fiddle uses a color background, but it will have the same result with an image. opacity and rgba have similar browser support, most notably IE9 works for both and IE8 usually doesn't (it has partial support for opacity, if you don't mind using an -ms-filter rule.
In Yahoo mail, when you are writing an email and you drag a file onto the page and hover, the message area becomes highlighted. It can be seen here:
The part of this that I don't get is how to have the blue area appear with partial opacity over the things under it that are normally visible.
With:
#blueBox {
background-color: #FFD090;
opacity: 0.0;
}
If the msgContent is a child of blueBox:
<div id='msgBox'>
<div id='blueBox'>
<div id='msgContent'>
... all the message contents, buttons, etc.
</div>
</div>
</div>
and when msgBox is hovered I increase blueBox opacity from 0 to say 0.6, the blueBox will show but the msgContent div is hidden until the hover event. It should be visible always.
If the msgContent div is not a child of blueBox, then the blueBox doesn't cover it.
I've tried rgba (http://jsfiddle.net/mkasson/nJcxQ/19/) like here on SO, but it doesn't cover over the child elements.
Couldn't do my usual watching/inspecting via browser's webdev tools because focus was never on the browser while dragging the file onto it.
Thanks!
Here is how I would go about this,
(What the problem is, you are using the parents background. You can't make the parents background go over it's content, that is not what a background does. It merely sites behind everything it is containing and acts as a background.)
html,
<div class="messageContent">
<span class="overlay"></span>
<p>Darn fanatically far and tarantula jeepers meek a secret much so hence underneath monogamously interwove apart gosh spilled far where and badger.</p>
This is a link
</div>
css,
.messageContent {
color: #000;
position: relative;
height: 100%;
width: 100%;
}
.overlay {
position: absolute;
top: 0;
left: 0;
background: lightBlue;
opacity: 0;
height: 100%;
width: 100%;
display: block;
z-index: 100;
}
.messageContent:hover .overlay {
opacity: 0.6;
}
What I am doing is placing an absolute span tag inside of the parent to act as the color overlay. When the parent is hovered the overlay child will become active by increasing it's opacity.
JSFIDDLE
Here's how I would do it.
<div id='msgBox'>
<div id='blueBox'>
</div>
<div id='msgContent'>
... all the message contents, buttons, etc.
</div>
</div>
CSS
#blueBox {
background-color: #FFD090;
opacity: 0.0;
position: absolute;
top: 0;
left: 0;
}
jQuery
$("#msgBox").hover(function(){
$("#blueBox").css({top:$(this).css("top")}).height($(this).outerHeight()).width($(this).outerWidth()).animate({opacity:0.6});
},function(){
$("#blueBox").animate({opacity:0}).height(0).width(0);
});
http://jsfiddle.net/54cx7/2/
The problem is that since content is a child of bluebox, then it inherits the 0 opacity.
I would like the top half of this image to display by default, and then use some CSS to make the image shift upward so that the bottom half shows when the mouse hovers over it. Here is the code and what I've tried, but it is not working. Can anyone help me make this code work?
HTML:
<div id="next">
<img src="images/next3.png" alt="next page">
</div>
CSS:
#next a:hover{background: url('images/next3.png') 0 -45px;}
EDIT:
HTML:
<div id="next">
</div>
CSS:
#next {
height:40px;
width:160px;
background-image:url('images/next3.png');
}
#next:hover{background-position: 100% 100%;}
I think you need to use background-position attribute to achieve this.
CSS
div
{
height:40px;
width:160px;
background-image:url('http://i.stack.imgur.com/OOGtn.png');
}
div:hover
{
background-position:100% 100%;
}
JS Fiddle Example
You can also look into CSS Sprites.
You need to use it as a background in the first place. The <img> is covering the background.
Get rid of the image HTML and just use some CSS like this
a {
display: inline-block;
height: 40px;
width: 160px;
background: transparent url(img.jpg) 0 0 no-repeat;
}
a:hover {
background-position: 0 40px;
}
In this case you will need to remove your <img> tag and consistently use the CSS background attribute for both cases. Also define your height and width width of your a tag with CSS too.
I have a structure like this:
<div class="abc">
<ul>
<li>something</li>
...
</ul>
</div>
I need to apply on the abc div an opacity option. If I do it, it works, but the text inside <ul> has opacity as the abc DIV => the text in <ul> is lighter.
Is there any way to apply opacity on the DIV (its background), but not on the content inside the DIV?
Thank you
Without pulling the ul out of the div, the only way I can think of to do this would be to make the background color partially transparent using rgba if it is a solid color:
background-color:rgba(0,0,0,.5);
This would make the background be black with 50% opacity, but would only work in newer browsers.
jsFiddle: http://jsfiddle.net/jdwire/XzeGE/
To support older browsers, you could instead base64 encode a tiny png into the css (or just reference an external image). See http://en.wikipedia.org/wiki/Data_URI_scheme for more info and see https://stackoverflow.com/a/5258101/1721527 for the drawbacks of embedding a base64 encoded image in the css or html.
If the background is an image, just make it a partially transparent png.
If the background is a color you can use an rgba background color like this:
background-color: rgba(0, 0, 0, 0.5);
That will produce a black background with 50% opacity, without affecting the opacity of the child elements.
Please note that this doesn't work with older versions of IE (6 & 7 i think).
You'll need a seperate div with the content and set its position over the opacity div like so:
<div class="container">
<div class="opacity"></div>
<div class="content"></div>
</div>
CSS
.container{
position:relative;
}
.opacity{
//desired opacity here
}
.content{
position:absolute;
top:0;
left:0;
}
rgba like the other answers say is also a good way to go if we're talking about the background-color here.
Try RGBA Instead
background-color: rgba(0,0,255,0.5);
here, last value indicates transparency in 0 to 1 level
Only use this if you plan to have a background image. Specify an alpha value for colours.
http://jsfiddle.net/jU8MT/
<div class="abc">
<div class="bgd"></div>
<ul class="def">
<li>something</li>
</ul>
</div>
.abc {
width: 200px;
height: 200px;
position: relative;
}
.bgd {
background: red;
opacity: 0.1;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.def {
z-index: 1;
}
Have you tried to apply opacity to inside elements? something like:
div {
opacity: ....
}
div ul {
opacity: .....
}
before i do anything as relates to internet explorer, i first call the html 5 shim to my header
<!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!--The fav and touch icons -->
now in your CSS file,
div.abc ul { background-color: #333; }
div.abc ul li{background-color: #333;}
i think this is what you're looking for?
i am making a popup. I have everything done, but when i want to make the opacity of anything behind it (i use the body tag) to 0.6 , the popup's opacity is changed too. How do i make this to where everything but the popup's opacity is dropped? - Thanks in advance :)
Try using rgba instead of opacity:
background-color: rgba(0, 0 , 0, 0.5);
It's: red, green, blue, alpha transparency values
Well, I was curious about this question and found out somewhere in Stack Overflow that a child element can never have opacity higher than its parent, nor override it (not an "official" source but I believe it).
So, the best workaround I saw is put your popup outside the low opacity element. Since it makes no sense to put the popup outside <body>, I wrap all the content in one div and put the popup outside. For example:
I can't show the body tags in JSFiddle but here's the link anyway http://jsfiddle.net/qWRj5/1/
<body>
<div id="all">Lorem Ipsun Delores Sic Transit Glori Repium Sider Traministu
Difirenziatum Tiramisu. Lorem Ipsun Delores Sic Transit Glori Repium Sider Traministu
Difirenziatum Tiramisu. Lorem Ipsun Delores Sic Transit Glori Repium Sider Traministu
Difirenziatum Tiramisu.
</div>
<div id="popup">My Gosh, that is some awful Latin</div>
</body>
CSS
#all { opacity: 0.5 }
#popup { padding: 10px; border: 2px dotted blue; position: absolute; left: 20px;
top: 10px; background-color: #fce; }