CSS ::backdrop控制普通全屏元素背景实例页面

回到相关文章 »

效果：

点击下面妹子图片进入陈晨玲的全屏状态：

代码：

CSS代码：

/* 全屏图片的背景 */
img::backdrop {
    background-color: #fff;
    background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}

HTML代码：

<img id="image" src="./mm.jpg">

JS代码：

// 旨在示意，因此，实际代码中的私有前缀这里省略了
image.addEventListener('click', function () {
    var doc = document;
    if (doc.fullscreen) {
        doc.cancelFullScreen();
    } else {
        this.requestFullScreen();    
    }
});