如何使背景溢出（在：之前）可见

Question

我想要一个包含动态内容的圈子。我正在使用背景图像 (SVG) 并对其进行缩放，使其始终位于内容后面。它几乎可以工作。背景被缩放但溢出不可见。所以左右溢出，或者上下取决于屏幕宽度，是不可见的。

.icwrap {
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: visible;
    display: flex;
    transform: translate(-50%, -50%);}

.iccont {
    text-align: center;
    position: relative;
    display: table-cell;
    overflow: visible;
    width: 45vw;
    padding: 7.5vw;
    height: auto;
    color: #FFF;}

.iccont h1 {
   font-size: 1.5em;
   font-weight: 700;
   margin-bottom: 0px;
   line-height: 1.5em;}

.iccont p {
   line-height: 1.5em;}

.icwrap:before {
   content: '';
   width: 100%;
   height: 100%;
   min-height: 100%;
   display: block;
   position: absolute;
   left: 50%;
   top: 50%;
   overflow: visible;
   transform: translate(-50%, -50%);
   background-position: center;
   background-image: url(https://upload.wikimedia.org/wikipedia/commons/0/01/SVG_Circle.svg);
   background-repeat: no-repeat;
   background-size: cover;}

看我上面描述的代码： https://jsfiddle.net/g471tLzf/

我喜欢这种行为。有显示溢出的解决方案吗？

Answer 1

圆内接的矩形最大面积为radius/sqrt(2)宽的正方形。

如果对基础数学感兴趣，请查看视频。 https://www.youtube.com/watch?v=wNMK92GVTO8。

因此，除非您的内容适合该框内的所有情况，否则您一般无法解决此问题。

如何使背景溢出（在：之前）可见

How to make the background overflow (in :before) visible

html

css

overflow