Question

我有一个名为 image 的图像类和一个名为 semitransparent 的div。

我想在CSS中创建一种semitransparent background颜色，以便可以通过它看到图像类中的图像

如何在CSS中创建这种半透明颜色？

.semitransparent{
width:300px;
height:300px;
}

.image{
background-image:url(https://picsum.photos/200/300/?random);
width:300px;
height:300px;
}

<div class="semitransparent">
<div class="image">
</div>
</div

Answer 1

您可以使用“ position：absolute”放置叠加层-您需要在文档和尺寸上找到位置。但这可能会令人讨厌，因为一旦窗口尺寸更改，您就必须继续对其进行修复。您听说过css-filter:blur吗？上课

.blur{ filter: blur(4px) }

，然后将该类添加/删除到图像中。哦，等等.. not supported widely enough：-/

根据您可能具有或可能要实施的约束，有很多方法可以避免必须修复叠加层以使底层元素的位置/尺寸保持匹配。

.overlay{ position: absolute; width: 300; height: 300 }
.image{ position: relative; }

然后将叠加层放置在图像DIV中。

<div class="image"><div class="overlay"></div><img src="…" …></div>

Answer 2

可以使用以下代码-

<div class="image">
    <div class="semitransparent">
    </div>
</div>

.semitransparent {
    background: black;
    opacity: 0.5;
    position: absolute;
    top:0; left:0; right:0; bottom:0;
}

.image {
    background-image:url(https://picsum.photos/300/300/?random);
    width:300px;
    height:300px;
    position: relative;
}

小提琴链接-https://jsfiddle.net/Lvhwmy31/

Answer 3

问题是，开始的方式..不可能通过z-index将子元素置于父元素之上，这当然是显而易见的尝试。

反正有点像CSS忍者风格:)

您宁愿将它们都作为同居物放置，给父母一个亲戚，然后覆盖一个绝对值，这样就完成了。

func applicationDidBecomeActive(_ application: UIApplication) {  
    if let home = HomeStore.sharedStore.home {  
        for accessory in home.accessories {  
            print(accessory.isReachable) //not updated  
            for service in accessory.services {  
                for characteristic in service.characteristics {  
                    characteristic.readValue { (error) in //updated  
                        if error == nil {  
                            let notification = Notification(name: Notification.Name(rawValue: "UpdatedCharacteristic"))  
                            NotificationCenter.default.post(notification)  
                        }  
                    }  
                }  
            }  
        }  
    }  
}

Answer 4

.full {
  background: url(https://picsum.photos/200/300/?random) 0 0 no-repeat;
  min-height: 300px;
}

.full {
  background-size: cover;
  position: relative;
}   

.full:hover .overlay-effect {
  opacity: 1;
  cursor: pointer;
}

.overlay-effect {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(259, 67, 95, 0.7);
  overflow:hidden;
}

.full a
 {
  color: #fff;
}

.full h3 {
  padding: 15px 30px;
}

@media screen and (max-width: 368px) {
  .full{margin-bottom: 10px;}
}

<div class="full">

</div>
</div

Answer 5

检查此代码，根据需要更改“ rgba”颜色。

<div class="semitransparent">
<div class="image">
</div>
</div
.semitransparent{
width:100%;
height:100%;
background: rgba(0, 0, 0, 0.5);

}

.image{
background-image:url(https://picsum.photos/300/300/?image=206);
width:300px;
height:300px;

}

如何在CSS中的另一个div上创建并放置半透明层

5 个答案: