Question

我正在尝试实现图像中所示的取景效果。我想要的是改变div内的背景不透明度。这是我试过的，

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

但它不起作用

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

这是我代码的全部内容。

Answer 1

您必须使用:before和:after伪选择器。

这是一个尴尬的，但你可以这样做：http://jsfiddle.net/uLaa9fnu/1/

＆＃13;

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;
}

＆＃13;

<div class="container">
    <div class="frame">
        <div class="frame2"></div>
    </div>
</div>

＆＃13;

基本上，您使用主before元素上的after和.frame将叠加不透明度放在左右两侧，然后将该集合中的元素放到相同的大小使用before和after将叠加层不透明度放在顶部和底部。

身体上的overflow:hidden;（或父母的任何内容）也很重要，否则你会有长滚动条。

Answer 2

您可以尝试添加：

opacity:0.5;

或者你想要不透明度的任何值

Answer 3

我发现很难弄清楚你究竟想要实现的目标，但你提供的代码似乎可以正常工作？

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;
 }

有边缘的孩子＆＃39; div是透明的，显示它的父母背景和父母的背景。 div是半透明的，允许一些容器背景颜色通过。

Answer 4

这是使用画布过滤器完成的。您可以使用此代码执行此操作：

<强> 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);
}

注意：如果您的图片不是来自您的域，则会失败。在本地Web服务器上运行此代码或提供Base-64图像数据到img标记。看看这个Fiddle

CSS：更改具有相同背景的子div的背景不透明度

4 个答案: