Question

为了突出某个p元素，我写了一些JS，让它出现在黑暗的背景之上。

为了做到这一点，我使用jQuery创建一个叠加层，然后克隆信息p元素并将其绝对放置在叠加层上。

因为它删除了一些CSS属性（由于页面中的新位置而没有继承），所以我使用jQuery添加它们。

它完全可以。在我的Mac OS X上的Firefox 3.5.6中，当它逐渐消失时，像素的问题就会略显不足。我知道这是挑剔，但我很想让它消失，最终用户不知道差异。

此处提供了测试：https://www.ikatanspa.com/book-online/?test

这也是jQuery函数

var highlightFormSuccess = function() {

    var fadeTo = 0.6;

    var $info = $('p.information');

    if ($info.length) {


        // make overlay

        var $overlay = $('<div />')
            .css({
                display: 'none',
                width: '100%',
                height: $(document).height(),
                position: 'absolute',
                top: 0,
                left: 0,
                zIndex: 32767,
                opacity: 0
            })
            .attr({
                id: 'overlay'
            })
            .appendTo('body');

        // pull out success block and position above overlay

        var left = $info.position().left,
            top = $info.position().top,
            fontSize = $info.css('font-size'),
            width = $info.width(),
            color = $info.css('color'),
            lineHeight = $info.css('line-height');


        var $newInfo = $info.clone()
                            .css({
                                position: 'absolute',
                                top: top,
                                left: left,
                                'font-size': fontSize,
                                'line-height': lineHeight,
                                width: width,
                                color: color,
                                zIndex: 32767
                            })
                            .appendTo('body');

        $overlay
        .show()
        .fadeTo(1000, fadeTo);
        // wait then fade back out
        setTimeout(function() {

            $($overlay, $newInfo).fadeOut(1000, function() {
                $newInfo.fadeOut(250, function() { $(this).remove(); } );
            });

        }, 2500);


    };


};

Answer 1

也许你可以让事情变得更容易一些。我只是通过将段落规则设置为：

来复制所需的效果

p.highlight {
  position:relative;
  background-color:#ffffff;
  z-index:10;
}

我的叠加层：

div.overlay {
  position:fixed;
  background-color:#000000;
  z-index:5; // lower than my paragraph, higher than all else
  top:0; left:0; width:100%; height:100%;
}

-

<body>
  <div class="overlay"></div>
  <p>I'm a paragraph.</p>
  <p class="highlight">I too am a paragraph.</p>
</body>

使用我的jQuery效果的像素和浏览器的轻微问题

1 个答案: