CODEWITHSUNDEEP
htmlcss
Yoganand
Yoganand

Reputation: 340

CSS: change background opacity for a child div having same background

I am trying to implement a framing effect as shown in the image. All i want is to change background opacity inside a div. Here is what I tried,

.parent {
   background-color:rgba(0,0,0,0.6);
 }
.child {
   background-color:transparent;
 }

But its not working

html

   <html>
<head>
    <title>Xpress Music</title>
    <script src="jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="Express.css">

</head>
<body>
<div class="wrapper main">
<div class="main_box">
    <div class="logo">
        <img src="logo.png" alt="logo.png" width="8%">
    </div>
    <div class="wrapper wrapper1">
      <div class="frame" style="font-size:2vw;border-width:0px;margin-top:-10%;">COMING SOON...</div>
      <div class="frame frame1"></div>
      <div class="frame" style="border-width:0px;">
          <div class="field">
            <form action="/subscribe" method="get">
              <input type="submit" name="search" value="Go" style="float: right" />
              <div style="overflow: hidden; padding-right: .5em;">
                <input type="text" name="term" style="width: 100%;" />
               </div>
            </form>
          </div>
      </div>
    </div>
</div>
</div>
</body>
</html>

css

body{
    background-image: url('big-image.jpg')  ; 
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 0px;
    font-family: gunplay;
}
@font-face {
    font-family: gunplay;
    src: url(gunplay.ttf);
}
.logo{
    padding-left: 2%;
    padding-top: 2%;
}
.frame {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  color: white;
  border:9px solid #f4f4f4;
}
.frame1, .frame4 {
    border-width: 12px;
}
.frame2, .frame3 {
    opacity: 0.5;
}
.frame4 {
    opacity: 0.7;
}
.frame1 {
    opacity: 0.8;
}
.main {
    width: 100%;
}
.main:after {
    padding-top: 55.62%;
}
.main_box {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    color: white;
}
.wrapper {
  display: inline-block;
  position: relative;
}
.wrapper:after {
  display: block;
  content: '';
}

enter image description here

This is the entire part of my code.

Upvotes: 2

Views: 1527

Answers (4)

hmak
hmak

Reputation: 3978

This Is Done With Canvas Filters. You Can Do This With This Code:

HTML

<canvas id="can" width="1024" height="786" style="border: 1px dashed black"></canvas>
<img id="img" src="./IMAGE_NAME.jpg" style="display:none">

JS

onload = function(){
    var can = document.getElementById('can');
    var ctx = can.getContext('2d');
    var img = document.getElementById('img');

    ctx.drawImage(img, 0, 0, can.width, can.height);

    var id = ctx.getImageData(0, 0, can.width, can.height);
    var d = id.data;

    var bw = 100; // The Darker Border Width In Pixels

    for (var i = 0; i < d.length; i += 4) {
        if(i % (can.width * 4) / 4 < bw || i % (can.width * 4) / 4 > can.width - bw || i < bw * can.width * 4 || i > (can.height - bw) * can.width * 4 ){
            d[i]     -= 100; // red
            d[i + 1] -= 100; // green
            d[i + 2] -= 100; // blue
            d[i + 3] -= 100; // alpha
        }
    }

    ctx.putImageData(id, 0, 0);
}

NOTE: If Your Picture Is not From Your Domain It Fails. Run This Code On A Local Web Server Or Provide A Base-64 Image Data To img Tag. Take A Look At This Fiddle

Upvotes: 0

Jamie Barker
Jamie Barker

Reputation: 8246

You'll have to use :before and :after pseudo selectors.

It's an awkward one but you can do it like so: http://jsfiddle.net/uLaa9fnu/1/

html {
    height:100%;
    width:100%;
}
body {
    background-image: url('http://media1.santabanta.com/full1/Outdoors/Landscapes/landscapes-267a.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 0px;
    font-family: gunplay;
    height:100%;
    width:100%;
    overflow:hidden;
}
.container {
    position:relative;
    height:100%;
    width:100%;
}
.frame {
    background-image: url('http://i.imgur.com/4AcIXsD.png');
    background-repeat: no-repeat;
    background-size: 100%;
    height:340px;
    width:300px;
    position:absolute;
    left:calc(50% - 150px);
    top:calc(50% - 170px);
}
.frame:before {
    content:'';
    background:rgba(0, 0, 0, 0.5);
    display:block;
    position:absolute;
    left:-1000%;
    top:-1000%;
    bottom:-1000%;
    right:100%;
}
.frame:after {
    content:'';
    background:rgba(0, 0, 0, 0.5);
    display:block;
    position:absolute;
    right:-1000%;
    top:-1000%;
    bottom:-1000%;
    left:100%;
}
.frame2 {
    height:100%;
    width:100%;
}
.frame2:before {
    content:'';
    background:rgba(0, 0, 0, 0.5);
    display:block;
    position:absolute;
    left:0;
    top:-1000%;
    bottom:100%;
    right:0;
}
.frame2:after {
    content:'';
    background:rgba(0, 0, 0, 0.5);
    display:block;
    position:absolute;
    right:0;
    top:100%;
    bottom:-1000%;
    left:0;
}
<div class="container">
    <div class="frame">
        <div class="frame2"></div>
    </div>
</div>

Basically you use the before and after on the main .frame element to put overlay opacity over the left and right, and then you put an element within that set to the same size that use before and after to put overlay opacity at the top and bottom.

Also the overflow:hidden; on the body (or whatever the parent will be) is important otherwise you'll have long scrollbars.

Upvotes: 2

thecraighammond
thecraighammond

Reputation: 850

I'm finding it kind of difficult to work out what exactly you're trying to achieve, but the code you provided seems to work fine as far as I can tell?

http://jsfiddle.net/rhuzuu1z/

.container {
    width: 400px;
    height: 200px;
    background: navy;
}
.parent {
    width: 200px;
    height: 100px;
    background-color:rgba(0,0,0,0.6);
 }
.child {
    width: 100px;
    height: 50px;
    background-color:transparent;
    border: 1px solid red;
 }

The bordered 'child' div is transparent, showing it's parents background and the 'parent' div is translucent allowing some of the containers background colour to pass through.

Upvotes: 0

Ronald Zwiers
Ronald Zwiers

Reputation: 840

You could try adding:

opacity:0.5;

Or whatever value you want the opacity to be

Upvotes: 0

Related Questions