javascript - 左侧导航的不透明度，但直到特定区域

我在整个页面上有一个原始图像，然后我在同一个原始图像上有一个带有全黑图像的左侧导航。所以现在我的页面分为左右两部分，左边是黑色图像，右边是原始图像。现在在右侧部分，我在中间有一个 div，其中有一些内容在灰色框中。

这是我的 jsfiddle:https://jsfiddle.net/g2ahx6nq/6/

现在这是我必须在左侧导航侧做的:

在左侧，我有全黑图像，上面有内容。我想使用不透明度显示黑色图像后面的原始图像的透明图像，但我相信只有那个灰色 div 部分。
就在那个灰色 div 部分(写入文本的地方)下方，我想显示应该保持原样的黑色图像。

这有可能做到吗？在左侧导航侧 - 灰色 div 上方的顶部应该使用不透明度显示透明的原始图像，而在它正下方将是我已经拥有的黑色图像。

下面是我的完整 html 代码:

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="top">
        <img class="imgA1" src="assets\img\Uploads\homepage-image-1.png">
    </div>

    <div id="leftBar">
        <img class="logo" src="assets\img\Uploads\northman-logo.png">
        <br />

        <ul id="navigation">
            <li><a href="#">Text1</a>
            </li>
            <li><a href="#">Text2</a>
            </li>
            <li><a href="#">Text3</a>
            </li>
            <li><a href="#">Text4</a>
            </li>
            <li><i class="fa fa-facebook-square" style="float:left"></i>
            </li>
            <li><i class="fa fa-twitter-square" style="float:left"></i>
            </li>
            <li><i class="fa fa-instagram" style="float:left"></i>
            </li>
        </ul>
    </div>
    <div class="leftBar-bottom">
    </div>

    <!-- End Side bar div-->
    <div class="company-bio">
        <p align="center" style="font-family: Adelle PE">Hello World </p>
        <p align="center" style="font-family: Adelle PE">Nice Text! </p>
        <p align="center">Hello David</p>
    </div>

</body>

</html>

更新:

现在我正在尝试做非常简单的事情，但我不确定我该怎么做。我有这个 image这与我的左侧导航完全相同，其中顶部有点透明，底部是黑色图像。

所以在左侧导航栏上，我想在黑色图像开始的位置上方放置一些东西 - 与我在该图像链接中所做的完全一样。我在 div 下方添加了下面一行，但它没有显示在正确的位置:

<a class="login" href="#">Log In&nbsp&nbsp&nbsp&nbsp&nbsp|</a> 
<a class="login" href="#">Sign Up</a>

还有我们如何才能得到相应的facebook、twitter 和camera-retro 图像。我相信我们需要使用 fontawesome在这里，但我很困惑。

最佳答案

您可以使用 html5 svg 裁剪左栏大小的原始图像，并将其用作左面板内容的背景。这是一个工作示例，说明如何使用您的代码使用此功能。同样在多边形内，我使用 100% 代替 y 轴或高度，以便图像在高度方面响应，其中固定的 131px 的左面板宽度被用作相同的。这样，只有第一张图片的区域似乎与左侧面板重叠，而下方的其余部分则完全是黑色。

附言我调整了导航的 z-index 和 svg 以保留图像，以便在左侧黑色背景前面显示光图像不透明度。并使用 #clipimgA1 不透明度属性对其进行调整。我将其设置为 0.5。

希望这对您有所帮助。快乐编码。

* {
margin:0px;
}

body 
{

  margin: 0px;
  overflow-x: hidden;

}


p, span, h1, h2, h3, h4, h5, h6, td, div, ul, li 
{
    margin: 0px;
    padding: 0px;
    text-decoration: none;
    list-style: none;
}




img {
  /* Set max width to be 100% of the containing element */
 max-width: 100% ;
max-height: 100%;
}


body .company-bio p
{
	font-family: 'agenda';
       margin-bottom: 20px;
        letter-spacing: .18em;
    font-family: 'agenda';
    font-weight: 400;
   color: rgb(254, 254, 255);
}


div.company-bio
{

}

body .company-bio 
{
padding-top: 40px;


margin-left: 131px;

  /*Added Just now */
padding-bottom: 40px;
max-width:100%;
background: url("https://s30.postimg.org/l04wudgs1/grey-bar.png");

padding-left: 140px;
  padding-right: 155px;

font-size: 20px;
font-family: "Adelle PE";

}


.top h1
{
	color:#f86d2c;
	font-style: italic;
	font-size:37px;
}


.top p

{
	
color: white !important;
background-color: black;
}

.mission-statements .programs
{
position: relative;
    top: 60px;
width: 300px;
border-style:  solid;
border-width: 4px;
text-align: center;
font-size: 19px;
border-color: #EF7440;
padding: 25px;  
margin: 25px ;
margin-left: auto;
margin-right: auto;
text-shadow: 1.5px 2.598px 7.65px rgba(40, 40, 41, 0.16);
font-family: "adelle regular";
color: rgb(40, 40, 41);
line-height: 1.979;
}





.top h4
{

 font-size: 25px;
  font-family: "ITC Avant Garde Gothic";
  color: rgb(255, 255, 255);
  text-transform: uppercase;
  line-height: 1.792;
  text-align: left;
  -moz-transform: matrix( 1.65479981820633,0,0,1.66565153423699,0,0);
  -webkit-transform: matrix( 1.65479981820633,0,0,1.66565153423699,0,0);
  -ms-transform: matrix( 1.65479981820633,0,0,1.66565153423699,0,0);
  position: absolute;
  left: 684.247px;
  top: 280.77px;


}














.top h2
{


position: absolute;
    top: 320px;
    left: 450px;
    letter-spacing: .3em;
    font-size: 22px;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    color: rgb(255, 255, 255);
    text-transform: uppercase;
    line-height: 1.6;
    text-align: center;
    text-shadow: 0px 3px 6.37px rgba(40, 40, 41, 0.004);
}




body .northmanwild .title
{
	

/* background-image:url(assets/img/Uploads/insta-pics.png); */
width: 100%;
padding-bottom:40px;
padding-top:40px;
text-align: center;
font-size:37px;
margin-top: 0px !important;
margin-bottom: 0px !important;

font-family: "Adelle PE";
color: rgb(255, 255, 255);
font-weight: bold;
font-style: italic;
line-height: 1.979;
text-align: center;
/*text-shadow: 1.5px 2.598px 7.65px rgba(40, 40, 41, 0.5);
opacity: 100%;
fill: 57%;
*/  
}


div.leftBar-bottom
{
  background-image: url("https://s17.postimg.org/yvv4w2gmn/nav-background.png");
  float: left;

}


div.northmanwild
{
    margin-top: -2px;
    width: 90.1%;
    float: right;
    opacity: 0.8;
    margin-bottom: -7px;
 
}


body .footer
{

width: 90.3%;

float: right;
color: rgb(40, 40, 41);
padding-top: 30px;
padding-bottom: 20px;
font-weight: normal;
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url(assets/img/Uploads/footer-bg.png);
}



/*FIGURE OUT PROBLEM WITH MISSION STATEMENTS*/


body .mission-statements 
{

margin-left: 131px;

padding-bottom: 130px;
padding-left: 45px;
padding-right: 45px;
background-size: 100% 100%;
background-repeat: no-repeat; 
background-image:url(assets/img/Uploads/bg-trees.png);
}


body .mission-statements .why
{
padding-top: 40px;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    padding-bottom: 40px;               
    padding-left: 40px;
    position: relative;
    left: -40px;
    top: 30px;
}


body .mission-statements .how
{
padding-top: 40px;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
padding-bottom: 10px;
padding-right: 40px;
}

body .mission-statements .what
{
padding-top: 40px;
padding-bottom: 40px;
padding-left: 40px;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
position: relative;
    left: -40px;
    top: 30px;
}




body .mission-statements .why pre
{
padding-left: 40px;
}



body .mission-statements .how
{
	
	   margin-top: 0px !important;
    padding-right: 0px;
    margin-bottom: 0px !important;
}




/*.top .imgB1
{
  position: relative;
  top: -225px;
}

*/

.top 
{
  position: relative;
  top: 0;
  left: 0;
  margin-bottom:-7px;
}

.imgA1 
{
  position: relative;
  top: 0;
  left: 0;
 }
.clippedmain{
    position: absolute;
    top: 0;
    left: 0;
}
#clippedImg{
    position: absolute;
    top: 0;
    left: 0;
     z-index:2;
}

#clipimgA1 {
/*Chrome,Safari*/
-webkit-clip-path: polygon(1px 100%,131px 100%,130px 0px,0px 0px);
 position: absolute;
    top: 0;
    left: 0;
    z-index:2;
    opacity:0.5;
}

/*Firefox*/
clip-path: url("#clipPolygon");

/* iOS support inline encoded svg file*/
-webkit-mask: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIwIiBoZWlnaHQ9IjAiPgogIDxjbGlwUGF0aCBpZD0ic3ZnQ2xpcCI+CiAgICA8cGF0aCBpZD0ic3ZnUGF0aCIgZD0iTTI1LDI1MCBMNzAsMjUwIDcxLDI4NSAyNjAsMjg1IDI2MSwyNTAgMTYwLDI1MCAxNjAsMTE1IDIyNSwxMTUgMjI1LDkwIDE2MCw5MCAxNjAsNzAgMjUsNzAgeiIvPgogIDwvY2xpcFBhdGg+CiAgPHBhdGggaWQ9InN2Z01hc2siIGQ9Ik0yNSwyNTAgTDcwLDI1MCA3MSwyODUgMjYwLDI4NSAyNjEsMjUwIDE2MCwyNTAgMTYwLDExNSAyMjUsMTE1IDIyNSw5MCAxNjAsOTAgMTYwLDcwIDI1LDcwIHoiICAvPgo8L3N2Zz4=) no-repeat;
}

.imgB1 
{
  position: absolute;
  top: -65px;
  left: 70px;
}





.footer .footer-section1
{
  float: left;
  width: 33%;
}







.footer .footer-section2 .block-title
{
position: relative;

width: 338px;
left: -140px;
font-size: 16px !important;
font-family: "AvantGarde";
color: rgb(40, 40, 41);
    /* font-style: italic; */
letter-spacing: 4px;
border-bottom: 2px solid #000000;

}



.footer .footer-section2 .block-content
{
font-style: italic;
line-height: 1.52;
top: 18px;
left: 52px;
position: relative;
}




.footer .footer-section3 .block-content
{
  position: relative;
  line-height: 1.52;
  
  left: 12px;
  letter-spacing: 4px;
  top: 15px;
  font-style: italic;
}


.footer .footer-section3 .block-title
{
border-bottom: 2px solid #000000;
width: 60%;
left: 14px;

position: relative;
}



.footer .footer-section1 .block-content
{
    position: relative;
    line-height: 1.52;
    top: 67px;
    left: 125px;
  
    font-style: italic;


}





.footer .footer-section2
{
  position: relative;
  left: -89px;
}
.footer .footer-section2
{
  float: left;
  width: 33%;
}

.footer .footer-section3
{
  float: left;
  width: 33%;
}


.scroll-down {
  opacity: 1;
  -webkit-transition: all .5s ease-in 3s;
  transition: all .5s ease-in 3s;
}

.scroll-down {
  position: absolute;
  bottom: 28px;
  left: 55%;
  margin-left: -16px;
  display: block;
  width: 32px;
  height: 32px;
  background-size: 14px auto;
  border-radius: 50%;
  z-index: 2;
  -webkit-animation: bounce 2s infinite 2s;
  animation: bounce 2s infinite 2s;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

.scroll-down:before {
  position: absolute;
  top: calc(50% - 8px);
  left: calc(50% - 6px);
  transform: rotate(-45deg);
  display: block;
  width: 12px;
  height: 12px;
  content: "";
  border: 2px solid white;
  border-width: 0px 0 2px 2px;
}
section.ok {
  position:relative;
  top:2000px;
}


















.copy-rights

{
  font-size: 16px;
  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  position: relative;
  top: 48px;
  display: block;
  font-size: 12px;
  text-align: center;
  color: rgb(40, 40, 41);
  font-style: italic;
  -moz-transform: matrix( 0.99963252426166,0,0,0.99882633931212,0,0);
  -webkit-transform: matrix( 0.99963252426166,0,0,0.99882633931212,0,0);
  -ms-transform: matrix( 0.99963252426166,0,0,0.99882633931212,0,0);
   font-style: normal;
}









#leftBar 
{
   
   background-color: #030303;


  box-shadow: 2.996px 0.157px 7.65px 1.35px rgba(40, 40, 41, 0.25); 
  border-right: solid #EF7440;
  border-right-width: 4px;
  top: 0px;
  bottom: 0px;
  left: 0px;
     height: 2278px;
  position: absolute;
  width: 131px;  
    /*Commented today */
 /* opacity: 0.5;  */



}

/*

#holder {
  width: 700px;
   margin-left: 263px;
  padding-left: 50px;
  margin-top: 10px;
  height: 100%;
  float: right;
  position: fixed;

}

*/

@font-face {
  font-family: BEBAS;
  src: url("http://webdesigncove.com/fonts/BEBAS___.ttf")
}

h1.logo {
  font-size: 26px;
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  text-transform: uppercase;
  line-height: 1.2em;
  letter-spacing: -3px;
  color: white;
  text-align: center;
  padding-top: 10px;
}

h1.postTitle {
  font-family: BEBAS, Helvetica, Verdana, Sans-Serif;
  }
  
p {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: normal;
  letter-spacing: .28em;
  line-height: 1.45em;
}

#navigation {
  padding: 0;
  margin: 0;
  text-align: center;
  position: relative;
  z-index: 3;
}

#navigation li {
  list-style-type: none;
  margin-bottom: 5px;
}

#navigation a:link {
    font-family: "ITC Avant Garde Gothic";
 font-size: 15px;
font-style: normal;

}

#navigation a:visited {

   color: rgb(255, 255, 255);
}

#navigation a:hover {
  color: #FE5B1F;
}


.copy-right-text 
{
    font: Bold 12px 'Open Sans';
    color: #ffffff;
    padding-top: 10px;
    text-align: center;
}

<div class="top">
<img id="clipimgA1" class="clippedmain" src="https://s28.postimg.org/tkwg9tmdp/homepage-image-1.png" alt="img">
<img class="imgA1" src="https://s28.postimg.org/tkwg9tmdp/homepage-image-1.png">
</div>

<div id="leftBar"> 

<br />

<svg id="clippedImg" width="0" height="0">
  <clipPath id="clipPolygon">
    <polygon points="1 100%,131 100%,130 0,0 0">
    </polygon>
  </clipPath>
</svg>    
<ul id="navigation">
<li><a href="#">Text1</a></li>
<li><a href="#">Text2</a></li>
<li><a href="#">Text3</a></li>
<li><a href="#">Text4</a></li>
<li><i class="fa fa-facebook-square" style="float:left"></i></li>
<li><i class="fa fa-twitter-square" style="float:left"></i></li>
<li><i class="fa fa-instagram" style="float:left"></i></li>
</ul>
</div>

<div class="leftBar-bottom"> 

</div>

<!-- End Side bar div-->
<div class="company-bio">
<p align="center" style="font-family: Adelle PE">Hello World </p>
<p align="center" style="font-family: Adelle PE">Nice Text! </p>
<p align="center" >Hello David</p>
</div>

关于javascript - 左侧导航的不透明度，但直到特定区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44078746/

javascript - 左侧导航的不透明度，但直到特定区域

上一篇：html - 带标题的 3x3 圆形图标网格

下一篇：html - 设置图像与文本垂直对齐