I have a 'floating' fixed position div which is shown onclick of a label. Within the fixed div is a form button.
Now, because its possible that the div could be shown anywhere on a page, and as a user scrolls the page under it, I give it an opacity of say 0.8. But, I still want the button inside the div at full opacity (1) but its not resetting the button opacity.
Here's the css
#delHolder {
width:280px;
text-align:center;
position:fixed;
background:#fff;
opacity:0.8;
height:60px;
top:150px;
left:50%;
margin-left:-140px;
z-index:2322;
border-radius:8px;
}
#multiDel { position:relative; z-index:232323; opacity:1.0; }
.className { opacity:1.0; }
html is something like:
<div id="delHolder"><input type="submit" class="className" id="multiDel"></div>
How can I only have transparency on holder div?
instead of
opacity:0.8;
background: #fff;
use
background-color: rgba(255, 255, 255, 0.8);
In this way the opacity applied on the parent won't be inherited from children.
Note: rgba() won't work on IE<=8
Related
I've messed with the display and position style properties but no matter what I try my element is stuck on the vertical axis.
I copied the CSS code from a button generator website and all works perfectly, I even added a function to it in javascript but I'm completely stuck on positioning it.
I'm only a few weeks into self-teaching myself to code and at the moment javascript is my strong point but obviously, CSS and HTML come in handy too. Any help is appreciated.
#startButton {
box-shadow: 0px 0px 12px 2px #3dc21b;
background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
background-color:#44c767;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Verdana;
font-size:18px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
position: relative;
top: 50%;
left: calc(50% - 30px);
}
.startButton:hover {
background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
background-color:#5cbf2a;
}
.startButton:active {
position:relative;
top:1px;
}
I have the element 'on its own in HTML if that makes any sense, it's not in its own div or head or body. I'm not sure if that makes a difference though.
Thanks!
Edit: I've got as far as figuring out the elements don't just overlap like I thought. I've learnt my problem is that the 'space' for the button element is stuck below the canvas. I now need a way to overlap these elements.
The reason is that the parent element (body in your case) does not have a static height.
Therefore you can add a parent element with static height and wrap your #startButton.
Edit your html:
<div class="parent">
<button id="startButton"> #Startbutton </button>
</div>
Add static height to the parent element (e.g. 300px):
.parent {
height: 300px;
}
Fiddle: https://jsfiddle.net/kongallis/chqn18us/6/
Refer also to: https://stackoverflow.com/questions/9765402/why-is-is-top50-in-css-not-working#:~:text=To%20answer%20your%20question%20why,a%20unit%20other%20than%20percent.
I am trying to change the z-index of the image posts that when you hover over them, it comes in front and cover the big white text.
Not sure what I'm doing wrong here...
http://hkumbrella.tumblr.com/
Image post css:
#post img {
width:100%;
z-index: -100;
}
#post img:hover {
opacity:1;
z-index: 100000 !important;
White text css(2014):
.subtitle2{
top:45%;
left:2%;
font-family:arimo;
font-weight:bold;
color: white;
text-transform:uppercase;
font-size:75px;
letter-spacing:-3px;
text-align:center;
position: fixed;
z-index:100;
color: #FFFFFF !important;
{block:Permalink}display:none;{/block:Permalink}
}
Set #wrapper's z-index higher then 100.
All the images are inside #wrapper div, and its z-index is less then its sibling .subtiles, so even if you set higher z-index for children of #wrapper, it won't come in front.
and you are using #post multiple at places in your page. you are not suppose to use id multiple places, instead use classes, they are meant for that only.
I've got two divs, the outer and the inner div. I have a background image and the outer div has an opacity set however i just cannot seem to get the inner div to not inherit the opacity of outer div. i would like the inner div to be a solid colour.
my code is below and a jsfiddle here: http://jsfiddle.net/3TK3U/
<style type="text/css">
body
{
background-image:url('http://media-bubble.info/images/layout/background.png');
}
.outsideBox {
width:70%;
height:200px;
background-color: #ffffff;
opacity:0.7;
filter:alpha(opacity=70);
text-align:center;
}
.insideBox {
width:40%;
height:80px;
background-color: #999;
z-index:999999;
}
</style>
<div id="Introduction" class="outsideBox">
<div id="Introduction" class="insideBox">This is the inside box which should not inherit transparancy</div>
</div>
Try using
background-color: rgba(255,255,255,0.7);
with no opacity or filter that should make the background transparent but not effect the contents of the element.
This is an old question but still comes up in a search so an update to highlight that you can also set the opacity with hex colour values too (not sure when this was introduced or how far back compatibility is across browsers).
For example if you have a background colour like this:
background-color: #5D5C61;
you can set the opacity by adding two hex digits to the end:
background-color: #5D5C61F5;
The range is 00 (fully transparent) to (FF).
It avoids having to convert to RGB if you don't want to in your page or app.
.outsidebox {
//Add your other properties as needed
background-color: #5D5C61F5;
}
.insidebox {
//No opactity needed here if you don't
//want it transparent.
//Add your other properties as needed
background-color: #1F2833;
}
I am trying to create a transparent border for my image and place it over the image using CSS.
For example please see the image below:
To achieve this I tried the following code but I am facing the following problems:
The border is not over the image; its around the image and not allowing the image to fit 100% inside the parent div
To Make the border transparent I used "opacity" but its making the image transparent too which I don't want.
You can check the code live here: http://jsfiddle.net/6GK45/
I could create a div and made the border color transparent and then place it over the image but the problem is the width of my image is fixed (277px) but the height is not. So this will not work for me.
Could you please tell me how to create the transparent image border and place it over the image just like in the image above.?
HTML:
<div class="box" >
<img class="lightbox" src="myimage.jpg" />
This is text
</div>
CSS
.box {
width:277px;
background:#FCFBDF;
}
.lightbox {
border: 5px solid red;
z-index:999;
opacity:0.3;
}
img {
width:277px;
}
How's this - it uses :after to create a pseudo-element which places the border on top of the image, not outside it. http://jsfiddle.net/6GK45/8/
.imgWrap:after{
content:"";
position:absolute;
top:0; bottom:0; left:0; right:0;
opacity:0.5;
border:5px solid red;
}
UPDATE: If it's important to preserve the ability to right-click on the image, you can do it like this with an additional wrapper: http://jsfiddle.net/6GK45/24/
For anyone still googling for this: It is possible to achieve this effect with CSS only by using the outline property:
img {
outline: 15px solid rgba(255, 0, 0, .75);
outline-offset: -15px;
}
<img src="http://i.dailymail.co.uk/i/pix/2012/12/04/article-2242647-0F79C42300000578-201_634x429.jpg" width=250 />
As Donovan said, rgba for the border-color – but the border on an element containing the image, and then the image “pulled” outwards under the border using a negative margin and z-index – like this, http://jsfiddle.net/6GK45/7/
<div class="box" >
<span class="lightbox"><img …></span>
…
</div>
.lightbox{
display:block;
width:267px;
border:5px solid rgba(255,255,255,.75);
}
.lightbox img{
display:block;
width:277px;
margin:-5px;
position:relative;
z-index:-1;
}
If you want a border with opacity, you can use RGBA code. The 'A' signify alpha, so you can modify opacity.
border: 5px solid rgba(255,0,0, 0.3) ;
You can use z-index to put your box with border above your image if you put image and box in position absolute, relative.
I updated your fiddle. http://jsfiddle.net/6GK45/21/
What you need to do is set the image as the background of the parent div and then adjust the width/height of the child div to hug the image accordingly.
//make js fiddle work
Suppose I want to render an arrow in CSS, which should have a head, a tail and flexible width so it can contain text. I can of course create multiple divs to get what I want, but how can this be done in CSS3?
I can use multiple background images:
div.arrow{
background: url('arrowtail.png') left no-repeat, url('arrowhead.png') right no-repeat;
}
The html:
<div class="arrow">This text is on a transparent background</div>
This gives me an div with an arrow-head and tail, and a transparent middle-section.
It does not seem possible specify the color to the middle section.
With only one background-image, you could do this:
div.arrow{ background: red url('some_image.png') no-repeat; }
I know this is doable in lots of ways, but is the background-color property really lost from the shorthand definition?
No, it's not exactly lost from the shorthand declaration. You can still specify the background color, but only for the last (middle) layer (regardless of whether you put an image there):
div.arrow {
background: url('arrowtail.png') left no-repeat,
url('arrowhead.png') right no-repeat,
red;
}
Note that for your scenario, your images may have to have completely opaque backgrounds. The background color will show under any transparent pixels of your images.
jsFiddle demo
Declaring background-color separately, however, may be much better for your scenario as it lets you use different colors based on the same background images (if you're good with transparent pixels on the parts of your images to be filled with the CSS background color):
div.arrow {
background: url('arrowtail.png') left no-repeat,
url('arrowhead.png') right no-repeat;
}
/* Assuming your red arrow has this ID */
#red {
background-color: red;
}
jsFiddle demo
I find using multiple background images to be problematic for things like this. Have you considered using the :before and :after pseudo elements? I wrote up a quick example:
<style>
.arrow { display:block; margin:0; padding:0; width:200px; height:45px; line-height:45px; text-align:center; background:#ddd; }
.arrow:before { float:left; display:block; margin:0; padding:0; width:25px; height:45px; background:#ccc; content:''; }
.arrow:after { float:right; display:block; margin:0; padding:0; width:25px; height:45px; background:#ccc; content:''; }
</style>
<div class="arrow">This text is on a transparent background</div>
Just replace the background color in the :before and :after declarations to the arrow images you want.
I was able to add multiple background-images and background-color like this:
background: url(../images/vis.png) no-repeat right, url(../images/vis.png) no-repeat left #fff;