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。

因此，除非您的内容适合每种情况，否则通常无法解决此问题。

如何使背景溢出（在：before中）

1 个答案: