如何使背景溢出(在:之前)可见

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

可以刻在圆中的矩形具有最大面积，该面积是半径/sqrt(2(宽度的正方形。

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

因此，除非您的内容适合该框内的所有情况。