Question

我已经完成了创建弹出div块的程序。在那里我创建了带有四个输入标签的div块。我用body标签添加它。然后我尝试为除此div标签之外的其他身体制作不透明度视图。

所以我试过这个

document.body.style="opacity:0.3";
document.getElementById("div_block").style="opacity:1";

div_block的opacity设置正确，它显示不透明度的值为1。但在网页中，不透明度也会影响div_block。如何避免????

Answer 1

由于您的弹出式窗口是body的子级，因此它们会受到其不透明度的影响。

为了避免这种情况，通常情况下，您会放置一个div，其宽度为100％，高度为100％，高于但您的弹出窗口，并为其提供部分透明背景（例如。{{ 1}}）。

Answer 2

因为你的语法错误：

class VideoPlayer: UIView {

    var player: AVPlayer!
    var wasPaused: Bool!

    func play(url: String) {
        // set the URL to the Video Player
        let streamingURL: NSURL = NSURL(string: url)!
        player = AVPlayer(URL: streamingURL)
        let playerLayer = AVPlayerLayer(layer: player)
        layer.insertSublayer(playerLayer, atIndex: 0)

        // Reset the state
        player.seekToTime(CMTime(seconds: 0, preferredTimescale: 600))

        // Start a timer to move the scrub label
        NSTimer(timeInterval: 0.1, target: self, selector: #selector(playbackTimeUpdated), userInfo: nil, repeats: true)
    }

    func playbackTimeUpdated() {
        // This one is not correct when seeking backwards
        let time = player.currentTime().seconds;

        // Use the time to adjust a UIProgressView
    }

    // Gets called when the reverse button is released
    func reverseTouchUp() {
        player.rate = 1
    }

    // Gets called when the reverse button is pressed
    func reverseTouchDown()
    {
        player.rate = -3;
    }
}

Answer 3

这是因为div_block元素是body元素的后代，而 IS 是受opacity:0.3;声明影响的视图层的一部分

body的不透明度值实际上是＆＃34;基线＆＃34;用于计算div_block ...

的不透明度

Answer 4

如果将透明度应用于父元素，则其子元素也将获得该效果。避免你必须覆盖元素现在，而不是将不透明度应用于主体应用于您想要覆盖的某个容器和元素保持在该容器之外。我没有包含javascript，但它会做同样的

也是<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>text</title> <style type="text/css" media="screen"> .container{ opacity: 0.3; background: yellow; height:400px; width:100%; } .over-lay{ position:relative; bottom:250px; background: red; width:150px; height: 150px; margin:0 auto; } .container>div{ background: purple; width:200px; margin:50 auto; } </style> </head> <body> <div class="container"> This is container <div>Another container</div> </div> <div class="over-lay"> This is over-lay </div> </body> </html>

我已创建此fiddle供您理解

{{1}}

Answer 5

问题是body中的所有内容都将继承您设置的任何样式。

为什么使用body而不只是100％的高度和宽度div？如果使用div方法，则可以将这两个元素分开，并且它们不会相互继承样式。

示例HTML：

<div id="container"></div>

<div id="div_block"></div>

示例JS：

document.getElementById("container").style="opacity:0.3"; document.getElementById("div_block").style="opacity:1";

为什么opacity没有在javascript中设置

5 个答案: