有没有办法制作一个带有3个透明框的纯色div？

时间：2019-02-19 16:42:55

标签： javascript html css flexbox

我在这里看到了div中一个透明框的编码，
但不是多个，我在使任何东西正常工作时遇到问题。.
我有一个outter div，它在左边，中间和右边带有边框，内部容纳3个框。
我希望这3个框在整个主要背景下一直保持不透明0.3。.
是否可以使用我不使用FlexBox或JavaScript的简单编码来实现？
我怎样才能使主div带有3个透明框的实体？
这是我的编码和图像。

body {
background-image: url("http://lorempixel.com/500/800/nature/3");
background-color: #ffffff;
background-position: top center;
background-repeat: no-repeat; 
background-size: cover;
height:600px;
width: 100%;
font-size: 20px;
margin: 0px;
padding: 0px;
background-attachment:fixed;
z-index: 9999px;  
}

main {
background: #336699;
width:90%;
height:600px;
margin: 300px 0px 0px 100px;
padding: 10px;
z-index: 1;
}
  
.divl {
background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
background-attachment: fixed;
background-size: cover;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
float:left;
text-align:center;
width: 20%;
height: 100%;
margin:0px;
padding: 0px;
border: 2px solid black;
border-radius: 5px;
}

.divr {
background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
background-attachment: fixed;
background-size: cover;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
float:right;
text-align:center;
width: 20%;
height: 100%;
margin:0px;
padding: 0px;
border: 2px solid black;
border-radius: 5px;
}

.divc {
background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
background-attachment: fixed;
background-size: cover;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
text-align:center;
text-align:center;
width: 50%;
vertical-align: middle;
height: 100%;
margin:auto;
padding: 0px;
border: 2px solid black;
border-radius: 5px;
}
text-align:center;
width: 20%;
height: 100%;
margin:0px;
padding: 0px;
border: 2px solid black;
border-radius: 5px;
}

.divr {
background: transparent;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
float:right;
text-align:center;
width: 20%;
height: 100%;
margin:0px;
padding: 0px;
border: 2px solid black;
border-radius: 5px;
}

.divc {
background: transparent;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
text-align:center;
text-align:center;
width: 50%;
vertical-align: middle;
height: 100%;
margin:auto;
padding: 0px;
border: 2px solid black;
border-radius: 5px;
}
<!DOCTYPE html>
<html>
<head>
</head>
  <body>
    <main>
     <div class="divl">Left <br> Make This Box Transparent..</div>
     <div class="divr">Right <br> Make This Box Transparent..</div>
     <div class="divc">Center <br> Make This Box Transparent..</div>
    </main>
     <div style="clear:both;"></div>
  </body>
</html>

enter image description here

3 个答案:

答案 0 :(得分：3)

希望这就是您所需要的。指定background-attachment：已修复时，它相对于窗口而不是相对于父块。

body {
background-image: url("http://lorempixel.com/500/800/nature/3");
background-color: #ffffff;
background-position: top center;
background-repeat: no-repeat; 
background-size: cover;
height:600px;
width: 100%;
font-size: 20px;
margin: 0px;
padding: 0px;
background-attachment:fixed;
z-index: 9999px;  
}

main {
background: #336699;
width:90%;
height:600px;
margin: 300px 0px 0px 100px;
padding: 10px;
z-index: 1;
}
  
.divl {
background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
background-attachment: fixed;
background-size: cover;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
float:left;
text-align:center;
width: 20%;
height: 100%;
margin:0px;
padding: 0px;
border: 2px solid black;
border-radius: 5px;
}

.divr {
background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
background-attachment: fixed;
background-size: cover;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
float:right;
text-align:center;
width: 20%;
height: 100%;
margin:0px;
padding: 0px;
border: 2px solid black;
border-radius: 5px;
}

.divc {
background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
background-attachment: fixed;
background-size: cover;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
text-align:center;
text-align:center;
width: 50%;
vertical-align: middle;
height: 100%;
margin:auto;
padding: 0px;
border: 2px solid black;
border-radius: 5px;
}
<!DOCTYPE html>
<html>
<head>
</head>
  <body>
    <main>
     <div class="divl">Left <br> Make This Box Transparent..</div>
     <div class="divr">Right <br> Make This Box Transparent..</div>
     <div class="divc">Center <br> Make This Box Transparent..</div>
    </main>
     <div style="clear:both;"></div>
  </body>
</html>

答案 1 :(得分：0)

您的主要html标记已分配有纯色，因此您的三个div是透明的，但将其保留为“ main”的一个不是。您需要为主要对象分配透明度或移除纯色背景。

main {
    /*background: #336699; remove this to see the background image */
    background: #33669947; /*optionally use hex to add transparency*/
    width:90%;
    height:600px;
    margin: 300px 0px 0px 100px;
    padding: 10px;
    z-index: 1;
   }

答案 2 :(得分：0)

body {
background-image: url("http://lorempixel.com/500/800/nature/3");
background-color: #ffffff;
background-position: top center;
background-repeat: no-repeat; 
background-size: cover;
height:600px;
width: 100%;
font-size: 20px;
margin: 0px;
padding: 0px;
background-attachment:fixed;
z-index: 9999px;  
}

main {
background: #336699;
width:90%;
height:600px;
margin: 300px 0px 0px 100px;
padding: 10px;
z-index: 1;
}
  
.divl {
background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
background-attachment: fixed;
background-size: cover;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
float:left;
text-align:center;
width: 20%;
height: 100%;
margin:0px;
padding: 0px;
border: 2px solid black;
border-radius: 5px;
}

.divr {
background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
background-attachment: fixed;
background-size: cover;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
float:right;
text-align:center;
width: 20%;
height: 100%;
margin:0px;
padding: 0px;
border: 2px solid black;
border-radius: 5px;
}

.divc {
background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
background-attachment: fixed;
background-size: cover;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
text-align:center;
text-align:center;
width: 50%;
vertical-align: middle;
height: 100%;
margin:auto;
padding: 0px;
border: 2px solid black;
border-radius: 5px;
}
<!DOCTYPE html>
<html>
<head>
</head>
  <body>
    <main>
     <div class="divl">Left <br> Make This Box Transparent..</div>
     <div class="divr">Right <br> Make This Box Transparent..</div>
     <div class="divc">Center <br> Make This Box Transparent..</div>
    </main>
     <div style="clear:both;"></div>
  </body>
</html>

相关问题
最新问题