Making Part of a Div Transparent

Making part of a div transparent

Future Options

The ideal scenario would be to use a single element with no images.

Masking and/or clipping would be helpful in situations like this, though browser support is limited. It does seem that progress has been made on the spec (below) since I first wrote this answer, so that's encouraging.

• http://www.w3.org/TR/css-masking/
• http://www.html5rocks.com/en/tutorials/masking/adobe/

Practical Approach

For now, I would go with an image-based solution. It doesn't need to be complex.

I recommend avoiding raster graphics since high-density displays are becoming more and more common (nearly every tablet/smartphone and 4K PC monitors). To accomplish this, SVG will work in most modern browsers and PNG can be used as a fallback.

Demos

• Here's a demo using a PNG: http://jsfiddle.net/MxspA/6/.
• Same demo with IE7 support: http://jsfiddle.net/MxspA/9/ (replaces :before and :after with extra elements).

Source for IE8+ Version

<div id="box">
    <div id="knockout"></div>
</div>

#box{ 
    position: relative; 
}

#knockout {
    background-image: url(http://i.stack.imgur.com/AXHM0.png);
    width: 105px;
    height: 180px;
    margin: 0 auto;    
}

#knockout:before{
    content: " ";
    position: absolute;
    left: -52px;
    width: 50%;
    height: 100px;
    background-color: #000;
}

#knockout:after{
    content: " ";
    position: absolute;
    right: -52px;
    width: 50%;
    height: 100px;
    background-color: #000;
}

Images

Here's a transparent PNG to get you started. Someone with basic Adobe Illustrator skills could recreate this as an SVG image, providing the aforementioned high resolution capabilities. An SVG will work nicely as a background image.

How to make div background color transparent in CSS

Opacity gives you translucency or transparency. See an example Fiddle here.

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";       /* IE 8 */
filter: alpha(opacity=50);  /* IE 5-7 */
-moz-opacity: 0.5;          /* Netscape */
-khtml-opacity: 0.5;        /* Safari 1.x */
opacity: 0.5;               /* Good browsers */

Note: these are NOT CSS3 properties

See http://css-tricks.com/snippets/css/cross-browser-opacity/

How to make a transparent part of a div

Here's code for creating blue shape using before and after pseudo-classes

body {
  background-color: green;
}

.container {
  margin: 50px auto;
  height: 300px;
  width: 210px;
  background-color: blue;
  position: relative;
}
.container:before, .container:after {
  content: "";
  height: 44%;
  position: absolute;
  background-color: blue;
  z-index: -1;
  width: 112%;
  left: -6%;
}
.container:before {
  top: 0;
}
.container:after {
  bottom: 0;
}

DEMO

Part of div transparent?

You can do a couple of things:

1. Try a background image where half is transparent and the other half is not.

2. Use a CSS gradient in such a way that half is transparent and the other is not. Ex:

   background: -moz-linear-gradient(top, rgba(30,87,153,0) 0%, rgba(41,137,216,0) 50%, rgba(34,125,203,1) 52%, rgba(125,185,232,1) 100%); /* FF3.6+ */
   

3. Use multiple divs where one has transparent BG and the other does not. Ex:

   <div>
      <div id="transparent" style="background: transparent"></div>
      <div id="not-transparent" style="background: #000"></div>
   </div>
   

I'm sure there are other ways, but those are the first three that come to mind.

Good luck.

How to make a div's background color translucent?

You can use the background-color: rgba() notation:

#theIdofYourElement,
.classOfElements {
    background-color: #fff;
    background-color: rgba(255,255,255,0.5);
}

---

Edited to add the default background-color (for browsers that don't understand the rgba() notation). Albeit I was under the impression that all but IE do understand it (but I could be wrong, and haven't tested to be sure...).

Edit with thanks to @akamike.

---

Edited to address question from OP (in comments):

which browsers don't understand rgba? will they all in the future, is this part of css3?

The best information I could find is the CSS Tricks' rgba() browser support table, with a link to a demo and 'more complete' compatibility table.

part of div transparent

There are 3 different posibilities that I can think of to solve your problem.

All of them are based on clipping instead of transparency, so the first thing that we need to do is to change the order of the divs:

HTML:

<div id="thirdLayer">hover me</div>
<div id="secondLayer"></div>
<div id="firstLayer"></div>

I have moved also the third layer in the front so that I can use the hover state without script, but this is not important.

The first posibility uses clip. Css:

#firstLayer {
 background-image:linear-gradient(90deg,white,black), linear-gradient(90deg,red,red);
 background-size: 100% 40%, 100% 100%;
 background-repeat: no-repeat;
 width: 100%; 
 height: 100px; 
 min-width:900px; 
 position:absolute; 
 left:0; 
 top:0;
 clip: rect(10px,0px,80px,0px);
 -webkit-transition: all 2s;
}

#secondLayer {
 background-image:linear-gradient(90deg,white,black), linear-gradient(90deg,blue,blue);
 background-size: 100% 40%, 100% 100%;
 background-repeat: no-repeat;
 width: 100%; 
 height: 100px; 
 min-width:900px; 
 position:absolute; 
 left:0; 
 top:0
}

#thirdLayer {
 position:absolute; 
 top: 110px; 
 left: 50%;
}

#thirdLayer:hover ~ #firstLayer {
    clip: rect(10px,800px,80px,400px);
}

Most of the CSS is standard stuff. I have replaced youyr images with gradients, so that the example does not depend on the availability of them. The key issue is using

    clip: rect(10px,800px,80px,400px);

To show only the part of the div that you want. The main problem with this solution is that it is not posible to use percentages in that property, so it is of limited use if you want it to be flexible.

demo 1

The second posibility is to play with the background-size:

#firstLayer {
 background-image:linear-gradient(90deg,white,black), linear-gradient(90deg,red,red);
 background-size: 1000% 40%, 1000% 100%;
 background-repeat: no-repeat;
 backgrond-position: -10% 0%;
 width: 10%; 
 height: 100px; 
 position:absolute; 
 left:-10%;
 top:0;
 -webkit-transition: all 3s;
 transition: all 3s;
}

#secondLayer {
 background-image:linear-gradient(90deg,white,black), linear-gradient(90deg,blue,blue);
 background-size: 100% 40%, 100% 100%;
 background-repeat: no-repeat;
 width: 100%; 
 height: 100px; 
 position:absolute; 
 left:0; 
 top:0
}

#thirdLayer {
 position:absolute; 
 top: 110px; 
 left: 50%;
}

#thirdLayer:hover ~ #firstLayer {
    left: 47%;
    background-position: 47% 0%, 47% 0%;
}

demo 2

Notice that to compensate that the width of the background is now 10%, the background size is now 1000%, so the porportion is the same:
There can be slight offsets in rendering, due to the different calculus, but the system is quiet good.

The third posibility is to use a clipping mask (with limited browser support)

#firstLayer {
 background-image:linear-gradient(90deg,white,black), linear-gradient(90deg,red,red);
 background-size: 100% 40%, 100% 100%;
 background-repeat: no-repeat;
 background-position: 0% 0%;
 width: 100%; 
 height: 100px; 
 position:absolute; 
 left:0;
 top:0px;
 -webkit-transition: all 3s;
 transition: all 3s;
}

#secondLayer {
 background-image:linear-gradient(90deg,white,black), linear-gradient(90deg,blue,blue);
 background-size: 100% 40%, 100% 100%;
 background-repeat: no-repeat;
 width: 100%; 
 height: 100px; 
 position:absolute; 
 left:0; 
 top:0;
}

#thirdLayer {
 position:absolute; 
 top: 110px; 
 left: 50%;
}

#firstLayer {
 -webkit-mask-position: -15% 0px;      
 -webkit-mask-size: 84px 100%;      
 -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
 -webkit-mask-repeat: no-repeat;
}
#thirdLayer:hover ~ #firstLayer {
 -webkit-mask-position: 52% 0px;      
}

We define a mask, and the only remaining issue is to set the position

demo3

How to make the background DIV only transparent using CSS

Fiddle: http://jsfiddle.net/uenrX/1/

The opacity property of the outer DIV cannot be undone by the inner DIV. If you want to achieve transparency, use rgba or hsla:

Outer div:

background-color: rgba(255, 255, 255, 0.9); /* Color white with alpha 0.9*/

Inner div:

background-color: #FFF; /* Background white, to override the background propery*/

EDIT

Because you've added filter:alpha(opacity=90) to your question, I assume that you also want a working solution for (older versions of) IE. This should work (-ms- prefix for the newest versions of IE):

/*Padded for readability, you can write the following at one line:*/
filter: progid:DXImageTransform.Microsoft.Gradient(
    GradientType=1,
    startColorStr="#E6FFFFFF",
    endColorStr="#E6FFFFFF");

/*Similarly: */
filter: progid:DXImageTransform.Microsoft.Gradient(
    GradientType=1,
    startColorStr="#E6FFFFFF",
    endColorStr="#E6FFFFFF");

I've used the Gradient filter, starting with the same start- and end-color, so that the background doesn't show a gradient, but a flat colour. The colour format is in the ARGB hex format. I've written a JavaScript snippet to convert relative opacity values to absolute alpha-hex values:

var opacity = .9;
var A_ofARGB = Math.round(opacity * 255).toString(16);
if(A_ofARGB.length == 1) A_ofARGB = "0"+a_ofARGB;
else if(!A_ofARGB.length) A_ofARGB = "00";
alert(A_ofARGB);

How to make part of a div transparent to show what's underneath?

You can use the ::after element to provide the circle, just use CSS variables to provide a constant image.

function applyZoom() {
  const zoomValue = document.getElementById('sizeinput').value;
  const zoom = '--zoom:' + zoomValue + ";"
  document.getElementById('myavatar').setAttribute('style', zoom);
}

.mydiv {
  --image: url('https://picsum.photos/id/46/300/300');
  --size: 400px;
  display:grid;
  place-items:center;
  width:400px;
  border-radius: 2rem;
  background-image:  linear-gradient(rgba(56, 76, 111, 0.5), rgba(56, 76, 111, 0.5)), var(--image);
   
}

.mydiv, .mydiv::after {
  aspect-ratio:1;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: calc(var(--zoom) * var(--size)) calc(var(--zoom) * var(--size));
}

.mydiv::after {
  display:block;
  content:"";
  width:200px;
  border:2px solid white;
  border-radius:100vh;
  background-image: var(--image);
}

<div class='mydiv' id='myavatar' style='--zoom: 1;'>
</div>
<br>
<input id='sizeinput'><button onclick='applyZoom()'>Zoom</button>

Make a div transparent but not the image inside

Just use this CSS for your DIV:

#transparent-background {
  background: transparent;
}

Make the text part of a div transparent

One of the ways to accomplish your specification using only CSS is to overlap the two background images perfectly thereby creating a "transparent" effect that you've described. Here's a fiddle: http://jsfiddle.net/v780v1Ln/.

Note: paddings and such alter the dimensions of the element and affect the coordinates that must be set for background images.

HTML:

<div id = "wrapper">
    <h1><span>DRD</span></h1>
</div>

CSS:

* {
    padding: 0;
    margin: 0;
}

html, body {
    height: 100%;
    background: #e2e2e2;
}

#wrapper {
    position: absolute;
    width: 70%;
    height: 50%;
    top: 25%;
    left: 15%;
    background: url(http://i58.tinypic.com/2vdieso.jpg)
                no-repeat
                0 0/500px 362px;
}

#wrapper > h1 {
    background-color: #fff;
    text-align: center;
    position: absolute;
    padding: 0 55px 0 25px;
    top: 25px;
    left: 25px;
}

#wrapper > h1 > span {
    font: bold 70px/1 Sans-Serif;
    text-transform: uppercase;
    background: url(http://i58.tinypic.com/2vdieso.jpg)
                no-repeat
                -45px -25px/500px 362px;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

---

Related Topics