浏览器全屏替换提示文字

Question

浏览器全屏时会出现：“按f11退出全屏”和“×”退出全屏的提示，请问怎么隐藏这两个提示或者将这两个的文字图标进行替换

Answer 1

您可以使用CSS样式来隐藏浏览器全屏状态下出现的提示，示例代码如下：

/* 隐藏按F11退出全屏的提示 */
:-webkit-full-screen-ancestor:not(:-webkit-full-screen) {
    overflow: visible !important;
}

/* 隐藏浏览器右上角的全屏退出按钮 */
::-webkit-scrollbar-corner {
    display: none !important;
}

/* 隐藏右上角的全屏关闭按钮 */
::-webkit-media-controls-fullscreen-button {
    display: none !important;
}

如果您想替换文字图标，可以先制作需要替换的图标，然后通过CSS样式给需要替换的元素添加背景图片或者展示替换后的文字图标。例如：

/* 替换全屏退出按钮的文字图标 */
::-webkit-media-controls-fullscreen-button {
    background-image: url("fullscreen-exit.png"); /* 替换的背景图片 */
    background-repeat: no-repeat;
    background-size: contain;
    width: 30px;
    height: 30px;
}

在上述代码中，将全屏退出按钮的背景图片替换成了一个名为 'fullscreen-exit.png' 的图片。同时，使用了样式属性，让这个背景图片自适应按钮的大小。