时间戳

首页 > 解决方案 > 如何使背景溢出（在：之前）可见

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

问题描述

我想要一个包含动态内容的圈子。我正在使用背景图像 (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/

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

标签： htmlcssoverflow

解决方案

可以内接圆的矩形的最大面积是半径/sqrt(2) 宽度的正方形。

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

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

推荐阅读