Question

我有一个听起来很简单的问题，但是从几天开始我就吓坏了。

我想用它的背景图像展开它的中心div，它不会移动。

当我添加背景位置：中心时，图像会保持固定，我想要它，但是非常不稳定（可能因为在divs动画期间必须重新计算中心位置）。

当我离开背景位置时，背景图像随着div的扩展而移动。

那么我如何从它的中心扩展div，将背景图像保留在原来的左上角位置？

到目前为止我所做的事情：

   /* the div containing the background image */

    .slideTitle {
      position:absolute;
      width: 0;
      height: 50px;
      background-color: #FFF;
      z-index: 999;
      transform: translate(-50%, -50%);
      transform-origin: center;
      top: 50%;
      left: 50%;
      -webkit-animation: revealText 2s;
      -webkit-animation-fill-mode:forwards;
      //background-position: center; /* the image stays in the center, but is shaky */
     }

    @keyframes revealText {
        0% {
            width: 0%;
        }
        100% {
            width: 100%;
        }
    }

html

<div class="slideshowInner">
    <div class="slideTitle" style="background-image:url('http://www.w3schools.com/css/trolltunga.jpg');">   
    </div>
</div>

我尝试了一个带有剪辑路径的解决方案，但改变了策略，因为Firefox不支持剪辑路径（我希望有一个智能而简单的解决方案）。

有一个jsfiddle可视化问题。 https://jsfiddle.net/db94cdmL/36/

我在俯瞰什么？

感谢您的帮助！卡拉

更新

由于这看起来像Chrome相关问题，我现在决定使用@-moz-document url-prefix() {}处理两种不同的解决方案。

    .slideTitle {
        position: absolute;
        -webkit-clip-path: inset(0px 50% 0px 50%);
        left: 0;
        right: 0;
        margin-left: 18%;
        margin-right: 18%;
        -webkit-animation: revealText 0.8s cubic-bezier(0.39, 0.58, 0.32, 1) 0.8s;
        -webkit-animation-fill-mode: forwards;
        top: 46%;
        text-align: center; 
        background-image: transparent;          
        @-moz-document url-prefix() {
            width: 0%;
            height: 9%;
            margin: auto;
            -moz-animation: revealTextMoz 0.8s cubic-bezier(0.39, 0.58, 0.32, 1) 0.8s;
            -moz-animation-fill-mode: forwards;
            background-size: auto 100%;
            background-repeat: no-repeat;
            background-position: center;
            background-image: url(/imageurl.svg);
            img {
                display: none;
            }
        }
    }

使用背景图像从中心展开div

0 个答案: