我注意到如果我有5個div元素共享邊緣,當CSS轉換運行時,邊緣開始重疊.我制作了這個JSFiddle來演示效果.單擊“更改”按鈕幾次,您應該開始看到問題.

注意：在Chrome,IE和Firefox中,我沒有看到此行為.只有Edge.

有沒有辦法防止這種情況發(fā)生？

這是我所看到的圖像：

var height = 100;

var width = 100;

$(function() {

var change = $('#change')

var top = $('#top')

var bottom = $('#bottom')

var left = $('#left')

var right = $('#right')

var center = $('#center')

var update = function() {

var windowWidth = $(window).width();

var windowHeight = $(window).height();

top.css({

left: 0,top: 0,width: '100%',height: height + 'px'

});

bottom.css({

left: 0,top: (2 * height) + 'px',height: (windowHeight - (2 * height)) + 'px'

});

left.css({

left: 0,top: height + 'px',width: ((windowWidth - width) / 2) + 'px',height: height + 'px'

});

right.css({

left: ((windowWidth + width) / 2) + 'px',height: height + 'px'

});

center.css({

left: ((windowWidth - width) / 2) + 'px',width: width + 'px',height: height + 'px'

});

}

$(window).resize(update);

update();

change.click(function(){

height = height === 100 ? 200 : 100;

width = width === 100 ? 200 : 100;

center.toggleClass('not-shown')

update();

})

})

#change {

position: absolute;

top: 10px;

left: 10px;

z-index: 15;

}

.backdrop {

background-color: rgba(0,0.5);

/* background-color: rgba(255,255,0.5);*/

-moz-transition: opacity 0.1s ease-in-out;

-o-transition: opacity 0.1s ease-in-out;

-webkit-transition: opacity 0.1s ease-in-out;

transition: opacity 0.25s ease-in-out;

opacity: 1;

display: block;

position: absolute;

z-index: 10;

}

.backdrop.not-shown {

opacity: 0 !important;

}

Change

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的html两方框重叠透明,html – 边缘浏览器向透明div添加重叠的“边缘”的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。