受半透明疊加

Question

CSS邊界不透明度我有這樣的項目：

https://jsfiddle.net/3xw9aqew/ 

當用戶將鼠標懸停在灰色框，紅色覆蓋帶有綠色邊框/輪廓。但是，此邊框將應用於在懸停時應用不透明度值的疊加層。

.image-container:hover .overlay { 
      opacity: 0.3; 
     } 

我想覆蓋到是半透明的，允許下面的圖片可以看到，但我想解決這個邊界是固體所以其標準的「綠」色。這是覆蓋的CSS：

.overlay { 
      position: absolute; 
      top: 0; 
      bottom: 0; 
      left: 0; 
      right: 0; 
      height: 100%; 
      width: 100%; 
      opacity: 0; 
      transition: .5s ease; 
      background-color: red; 
      border:10px solid green; 
      box-sizing:border-box; 
     } 

我該如何做到這一點？

Answer 1

對於預期的行爲，將所需透明度直接應用於background-color屬性值，而不是整個包含元素。這可以通過調整rgba的值來完成，如下面的嵌入代碼片段所示。

opacity應用於元素作爲一個整體，包括它的內容，即使該值不是由子元素繼承 。因此， 元素及其子元素相對於 元素的背景都具有相同的不透明度，即使它們相對於彼此具有不同的不透明度相對 也是如此。

opacity - CSS | MDN

.overlay { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 100%; 
    width: 100%; 
    opacity: 1; 
    transition: .5s ease; 
    background-color: transparent; 
    border: 10px solid transparent; 
    box-sizing: border-box; 
} 

.image-container:hover .overlay { 
    background-color: rgba(255, 0, 0, 0.3); 
    border: 10px solid green; 
} 

Updated JSFiddle

代碼片段演示：

var imgContainer = document.getElementById("imgContainer"); 
 
var lorem = document.querySelector(".hdr-left"); 
 
var ipsum = document.querySelector(".hdr-right"); 
 

 
//When clicking on imgContainer toggle between class to change colour and position 
 
imgContainer.addEventListener('click', function() { 
 
    lorem.classList.toggle("hdr-color-white"); 
 
    ipsum.classList.toggle("hdr-color-white"); 
 
    lorem.classList.toggle('hdr-left-middle'); 
 
    ipsum.classList.toggle('hdr-right-middle'); 
 
});

body { 
 
    max-width: 100%; 
 
    overflow-x: hidden; 
 
    background: yellow; 
 
    font-family: sans-serif; 
 
} 
 

 
.container { 
 
    width: 85%; 
 
    max-width: 700px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
img { 
 
    width: 100%; 
 
    max-width: 920px; 
 
} 
 

 
p { 
 
    font-size: 18px; 
 
    color: blue; 
 
    font-weight: bold 
 
} 
 

 
p.left { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0px; 
 
    right: -32%; 
 
    transform: rotate(-90deg); 
 
} 
 

 
p.right { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: -32%; 
 
    transform: rotate(90deg); 
 
} 
 

 
h2 { 
 
    font-size: 5em; 
 
    position: absolute; 
 
    text-transform: uppercase; 
 
    letter-spacing: 2px; 
 
    font-weight: bold; 
 
    margin: 0; 
 
    z-index: 5; 
 
    color: blue; 
 
    transition: all 0.5s ease-in-out; 
 
} 
 

 
.hdr-color-white { 
 
    color: white; 
 
} 
 

 
.hdr-left { 
 
    left: -12%; 
 
    top: -35%; 
 
} 
 

 
.hdr-left-middle { 
 
    left: 7%; 
 
    top: 40%; 
 
} 
 

 
.hdr-right { 
 
    right: -10%; 
 
    top: 110%; 
 
} 
 

 
.hdr-right-middle { 
 
    right: 7%; 
 
    top: 40%; 
 
} 
 

 

 
/*Hovers*/ 
 

 
.container:hover { 
 
    cursor: pointer 
 
} 
 

 
.container:hover>p { 
 
    color: red; 
 
} 
 

 
.container .image-container:hover {} 
 

 

 
/*Hovers Ends*/ 
 

 

 
/*Overlay*/ 
 

 
.image-container { 
 
    position: relative; 
 
    width: 100%; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 

 
.image { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
    outline: 5px solid blue; 
 
} 
 

 
.container .image-container:hover>.image { 
 
    outline: none; 
 
} 
 

 
.overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    opacity: 1; 
 
    transition: .5s ease; 
 
    background-color: transparent; 
 
    border: 10px solid transparent; 
 
    box-sizing: border-box; 
 
} 
 

 
.image-container:hover .overlay { 
 
    background-color: rgba(255, 0, 0, 0.3); 
 
    border: 10px solid green; 
 
} 
 

 

 
/*Overlay Ends*/

<div class="container"> 
 

 
    <!--Rotated Text--> 
 
    <p class="right">Harolds</p> 
 
    <p class="left">Harolds</p> 
 
    <!--//Rotated Text--> 
 

 
    <h2 class="hdr-left hdr-color" id="lorem">Lorem</h2> 
 

 
    <div class="image-container" id="imgContainer"> 
 
    <img src="http://via.placeholder.com/980x550" alt="gucci" class="image"> 
 
    <!--colour overlay--> 
 
    <div class="overlay"></div> 
 
    <!--//colour overlay--> 
 
    </div> 
 

 
    <h2 class="hdr-right hdr-color" id="ipsum">Ipsum</h2> 
 

 
</div>