我试图实现一个框架效果,如图所示。我只想改变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: '';
}

这是我代码的全部。

最佳答案

必须使用:before:after伪选择器。
很尴尬,但你可以这样做: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>

基本上,您可以使用主before元素上的after.frame在左侧和右侧放置重叠不透明度,然后在该集合内放置一个元素,其大小与使用beforeafter在顶部和底部放置重叠不透明度的大小相同。
此外,正文上的overflow:hidden;也很重要,否则您将有很长的滚动条。

10-05 21:01
查看更多