This question already has answers here:
How to apply an opacity without affecting a child element with html/css?
(12 answers)
How do I give text or an image a transparent background using CSS?
(29 answers)
Closed 4 years ago.
Ok so what I am trying to do is the following:
Have one div with a background image
1 div floating over first with a opacity of .50 and background color
Have a third div float on top of all with text.
I am using the following css and html and it does not work properly. The top div is assigned the opacity of the one below. I believe this has to do with parent divs how do I fix it?
#mbox {width:100%; height:150px; background:url(makerback.png)}
#mbox2 {width:100%; height:150px; background:#000000; opacity:.75;}
#mbox3 {width:80%; margin:0 auto; top:auto; bottom:auto; height:100px; text-align:center; color:white; line-height:100px; font-weight:bold; font-size:20pt; opacity:.;}
<div id="mbox">
<div id="mbox3">
<div id="mbox2">TEST TEXT</div>
</div>
</div>
I think that everything is working as you'd expect, except that the opacity is also being applied to #mbox2.
Since it is within the bounds of #mbox3, it will also have opacity: .5.
I believe this might lend to the illusion that the entire image behind it is also being faded out.
It's a little hard to imagine in your head, but your text element, should be placed beside the container if you don't want it to inherit opacity.
You can then just move it inside the bounds of your parent #mbox div using position: absolute.
Either way I created a JSFiddle that should do what you have in mind.
If I understood your questions you want your text to be in front, then your div with some background color and your final parent div with a background image.
You can stop your #mbox2 div from inheriting the opacity using background-color: rgba() and set in there your opacity level.
Here's a pen: Pen for the answer,
Hope it helps.
Related
This question already has answers here:
Can I ellipse a clipping mask on the bottom only?
(1 answer)
Can I create a div with a Curved bottom?
(5 answers)
Closed 3 years ago.
I have a big problem finding a solution to this problem.
I have seen many samples of creating a container with curved bottom border exactly as I want but they all have plain or gradient background-color.
I need a container with a background-image and a curved bottom border and a bottom border color like you see in the picture.
The problem with all samples which I have seen is that the background-image gets distored if I use the common way of applying the bottom border using CSS.
This is a plain and simple html structure so if you want to help, you have a reference.
<div class="wrapper" style="background-image:url('images/someimage.jpg');">
<p>some text on the background image</p>
A button
</div>
Thanks in advance.
Have a look into using clip-path, it's not a perfect solution and will require some tweaking of the numbers to get it to look how you wish.
See the below example:
main {
height:500px;
background-color:#ccc;
}
.wrapper {
background-image:url('https://picsum.photos/id/1039/1280/720');
background-repeat:no-repeat;
background-position:center;
height:350px;
clip-path: ellipse(100% 60% at 50% 40%);
}
<main>
<div class="wrapper"></div>
<h2>This is some more content</h2>
</main>
JSFiddle
More Information can be found: CSS-Tricks
I have a div with stuff in it on a page with a background gradient.
Now towards the right, I would like to fade that div out to the background:
I have tried using background gradients, but those are behind the text. Basically what I would need was a foreground property which I could fill with another gradient.
How can I achieve this without needing to use canvas and JavaScript?
I suggest creating a transparent .png image and applying it as a background on top of the div with text by creating a class with absolute positioning.
.transparent {background: url("xxxxxx.png") repeat-y 0 0 transparent; position:absolute; top:0; right:0; z-index:1;}
Hope this helps.
A transparent (rgba) gradient in a separate DIV positioned absolutely on top of the original div should do the trick.
Caveat: Absolute positioning may not be feasible, depeding on your layout.
Hoping for some advice around a CSS issue - I have a layout where I'm absolutely positioning link text above a background image, but cannot get the link to expand to the height of the container (in IEx, works fine in Chrome)
<div>
<img />
<a />
</div>
The containing div has a background colour, and the image has its opacity reduced - on hovering the image, the opacity reduces further, leaking more of the background color. At the same time, the opacity of the link changes from 0 to 100. I'm using a few CSS transitions as well, just to prettify it.
I know that positioning the link absolutely removes it from the flow, so setting height to 100% won't work, but shouldn't I be able to set it explicitly? Doing so works in Chrome but not IE. Problem is related to the image, as the link behaves correctly if it is removed.
Example:http://jsfiddle.net/thSCJ/8/ (includes just enough detail to highlight my problem. In IE, hovering the top left of the image reveals the link. In Chrome, any hover on the image reveals the link).
Any suggestions?
You need to have the <a> tag wrapping the image and the text:
<a href="#">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR6kpJ562NTt7Vkya4ocQ3Aq7mVqNB04ccB9XNCr-b4mPdYU6Y5Yg" width=200 height=200/>
<span>Link text</span>
</a>
Here is the CSS:
a {
width:200px;
height:200px;
background:#cccccc;
}
a:hover > span {
display: inline;
}
span {
display: none;
position:absolute;
top:0;
left:0;
width:200px;
height:200px;
color:red;
}
Fiddle: http://jsfiddle.net/thSCJ/12/
Instead of changing the opacity, simple change the font-size property and put the entire thing in the <a> tag.
See this JSFiddle.
This question already has answers here:
Adjacent divs with angled borders? [duplicate]
(3 answers)
Closed 7 years ago.
I'm creating a javascript widget that resizes neighbouring divs, to reveal more of the div's background-image when the user hovers on it. This is simple enough, and working nicely with the divs having straight edges (obviously). However, the bordering edge 'needs' to be slanted.
Is there a simple way using css3 to make a slanted border between 2 DOM elements?
I have come across css3 transformations (namely, skew), and the diagonal border trick (using half colour, half transparency), but neither of these seem to be able to achieve what I need.
The effect I'm trying to achieve is like in this image:
You could technically embed your image in a rotated (see CSS3’s transform: rotate(<X>deg)) <div/>, and then rotate the embeded image with a reverse angle.
Alternatively, you could use SVG (with <clipPath>) to achieve this effect. Plus SVG embedded in <object/> tags can use JavaScript, so the responsive part can be part of the ride.
Both JSFiddle are on their way.
EDIT1: CSS Version: http://jsfiddle.net/kU3tu/
EDIT2: SVG Version: http://jsfiddle.net/b2JJK/
I have tried from my side may that's help you.
HTML
<div class="container">
<div class="imageWrap ro">
<div class="pic"></div>
</div>
<div class="imageWrap">
<div class="pic2"></div>
</div>
</div>
CSS
.container{
width:600px;
height:400px;
border:1px solid red;
overflow:hidden;
white-space:nowrap;
}
.imageWrap{
width:300px;
display:inline-block;
height:500px;
position:relative;
width:400px;
vertical-align:top;
margin-left:-70px;
}
.imageWrap.ro{
border-right:5px solid red;
-webkit-transform:rotate(15deg);
-moz-transform:rotate(15deg);
transform:rotate(15deg);
overflow:hidden;
z-index:1;
margin-left:-100px;
margin-top:-80px;
}
.pic{
background:url('http://lorempixel.com/output/nightlife-q-c-746-711-9.jpg');
-webkit-transform:rotate(-15deg);
-moz-transform:rotate(-15deg);
transform:rotate(-15deg);
width:640px;
height:640px;
position:absolute;
left:-50px;
}
.pic2{
width:400px;
height:400px;
background:url('http://lorempixel.com/output/sports-h-c-609-626-7.jpg');
}
Check this http://jsfiddle.net/fZMuJ/5/
The solution I can think of is to use two absolutely positioned images and a div container with overflow set to hidden.
The red and green are images (red one could be shorter from the top and green one could be shorter from the bottom as these parts are not visible anyway).
Blue is the container with overflow:hidden.
Image
But this solution requires rotating the images, which might not be right for you use.
The second solution would be to use one image and a separator div being just a rotated border. But in this case you could prepare appropriate image before anyway without the need for hacks.
So, I have this wonderful image here:
And what it is is a header for a website - click it to view it full size..
I need to re-create this using HTML/CSS/images and I can't figure out how. It has to be 100% width yet, the point where the gradient turns from one type to the other, has to remain in the same place on resize. To illustrate:
The area that is not blacked out must stay in the center of the page at all times and not move. The areas in black must extend to 100% of the screen width and have a tiled background gradient.
How can this be done?
I have tried something like this:
Where green is a div with a fixed width and centered yellow is the 'twirl' gradient bit and then red/blue are the tiling gradients. But this does not work because the tiling gradients to not match the position of the 'twirl' when the browser is resized.
Note: This must support IE7+ and must be cross-browser compatible and preferably uses no javascript.
I’m not sure why do you actually want to make this so hard by cutting the image up into pieces?
Take the image, extend the canvas to let’s say 5000px and just repeat the gradients to both sides. You’ll maybe add about 200 bytes (yes, bytes, not kilobytes) to the image size, but you’ll make it all up without adding 2 more requests for the separate backgrounds to the page.
And then just set the image to background-position: center top;
And as the center DIV is fixed width, you can either add a container to have the background or add the background to BODY for example.
Well, I think I've managed to do it..
<header>
<div id="bg-left"></div>
<div id="bg-right"></div>
<div id="header-content">
My header contents
</div>
</header>
And
header {
height:88px;
}
header #header-content {
width:1004px;
height:88px;
position:absolute;
left:50%;
margin-left:-502px;
background-image:url("/img/header-bg-middle.png");
}
header #bg-left, header #bg-right {
position:absolute;
height:88px;
}
header #bg-left {
background-image:url("/img/header-bg-left.png");
width:50%;
}
header #bg-right {
width:50%;
background-image:url("/img/header-bg-right.png");
right:0px;
}
So basically, I am creating a fixed width div in the center of the page, and then behind that I create two 50% width divs that have the appropriate gradient background.
Id do the same thing as you started doing with the one 'twirl' being centered, with two divs on the outside... the way I would do this is like this:
this is what i have:
<div style="width:100%">
<div style="background:#333; position:absolute; left:50%; top:0; width:50px; margin:auto; height:50px; z-index:10;">
</div>
<div style="width:50%; position:absolute; left:0; top:0; background-color:#060; height:50px; margin:0; z-index:1">
</div>
<div style="width:50%; position:absolute; right:0; top:0; background-color:#060; height:50px; margin:0; z-index:2">
</div>
</div>
</div>
which can be viewed here: http://sunnahspace.com/TEST.php
basically you have a container div, which if you decide to move this around at all id make relative positioned. then youd take the piece where the gradients change and make that your 1st inner div, with the different gradients your 2nd and 3rd div. Basically, the 1st div (the "twist") is positioned to stay in the same place of the browser (the middle, see the 50%, but this can be set to say 200px from the right, etc.) with the other two divs expanding when browser window sizes change. The z-index layers the css, so the 1st one having a z-index of 10 is on top (the number hardly matters so long as it is the highest number, but leaving it like this allows you to add more layers underneath without having to change the z-index, with the other two having z-indexes of 1 and 2, doesnt matter which order so long as they are less than the top div, this lets the first div sit on top of these two divs, hiding where they meet. Should work, let me know how it goes, and if need be ill fix a few things.
Is this what you want to do? http://jsfiddle.net/nnZRQ/1/