用CSS中的透明空间覆盖图像

Question

有可能像下面的CSS一样 在360度全景图上覆盖透明的空白空间，以响应并保持比例

我尝试创建4个div并使用此CSS

Unable to resolve dependency for ':app@enterprise/compileClasspath': Could not resolve project :some-lib.
Unable to resolve dependency for ':app@enterpriseUnitTest/compileClasspath': Could not resolve project :some-lib.

Answer 1

我的想法是将图像放置两次。 1次为透明边框，第二次为居中并溢出-并隐藏溢出部分

Here's an example

HTML

<div class="trans-cont">
  <img class="trans-img" src="https://www.w3schools.com/w3css/img_lights.jpg" />
  <div class="center">
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" />
  </div>
</div>

CSS

.trans-cont{
  display: inline-block;
  position: relative;
  background-color: #454545;
  width: 40%;
}

.trans-img{
   opacity: 0.3;
   width: 100%;
}

.center{
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  position: absolute;
 overflow: hidden;
}
.center img{
  width: 125%;
  position: absolute;
  top: -12.5%;
  left: -12.5%;
}

选项2：

使用一次图像，并以divs为边框将其隐藏

Example 2

Answer 2

请尝试以下操作：

HTML：

---

   <div class="container">
     <img src="imgSrc" alt="imgName" style="width:100%;">
     <div class="content">
     </div>
   </div>

CSS：

---

.container {
       position: relative;
       max-width: 100%;
       margin: 0 auto;
   }

   .container img {vertical-align: middle;}

   .container .content{
     position: absolute;
     top: 25%;
     left: 20%;
     width: 60%;
     height: 40%;
     box-shadow: 0 0 0 9rem rgba(0, 0, 0, 0.5);
    }