受半透明叠加

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>