首页 > 解决方案 > git点是如何在网站上显示的

问题描述

导航到网站https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/

贴上截图,它是一个公共领域的网站,所以我认为不会有内容版权问题

Git虚线网站截图

我喜欢网页上的虚线图案。我最初认为它是一个图像,但是当我在任何地方检查元素时,我无法看到图像或任何用于显示这些点的 css 样式。这种虚线图案是如何实现的?

标签: htmlwebstylesdivision

解决方案


您无法在检查元素中看到它,因为它巧妙地置于:before元素状态中。

检查.post__header:before他们的 CSS,你会找到图像以及他们如何将其放在那里。

.post__header:before{
    background:url(/wp-content/themes/github-blog/dist/css/../../assets/images/dot-left-corner.png) no-repeat;
    content:none;
    height:300px;
    left:0;
    pointer-events:none;
    position:absolute;
    top:0;
    transform:translate(-125px,-152px);
    width:318px
}

同一页面中有更多元素使用此方法而不是任何直接方法。


推荐阅读