1

我正在尝试使用纯 CSS 移动 div 元素的背景图像。在这里，我从用户那里输入背景图像 url，这就是为什么我不能在 CSS 中声明它。我也不能将其声明为位置固定或绝对的图像，因为它会影响我其余的 CSS。有没有办法只为 div 元素的背景编写 CSS？

小提琴- jsfiddle.net/ZTsG9

HTML：

<div class="view" style="background-image: url('http://css3slideshow.remabledesigns.com/1.jpg')">According to a new report from AnandTech, Samsung might be fibbing its way to more favorable Galaxy S4 benchmarks. Has your device suddenly come to a crawl? Of course it hasn’t; benchmarks shouldn’t change your perception of a flagship as powerful as the S4. Still, it’s embarrassing that Samsung would resort to such technical tactics, like allegedly using code dubbed “BenchmarkBooster.” Yes, your device takes steroids.</div>

CSS：

.view {
    position:relative;
    height:100%;
    width:100%;
    top:0;
    left:0;
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite;
    /* Safari and Chrome */
}
@keyframes mymove {
     from {
         left:0px;
     }
     to {
         left:200px;
     }
}
@-webkit-keyframes mymove
/* Safari and Chrome */
    {
     from {
          leftp:0px;
     }
     to {
         left:200px;
     }
}
4

2 回答 2

1

您需要做的是添加 background-position: x, y 其中 x 和 y 等于您要放置元素的位置的长度和高度。http://www.w3schools.com/cssref/pr_background-position.asp 

<div class="view" style="background-image: url('http://css3slideshow.remabledesigns.com/1.jpg') background-position:50px 20px;">
 According to a new report from AnandTech, Samsung might be fibbing its way to more favorable Galaxy S4 benchmarks. Has your device suddenly come to a crawl? Of course it hasn’t; benchmarks shouldn’t change your perception of a flagship as powerful as the S4. Still, it’s embarrassing that Samsung would resort to such technical tactics, like allegedly using code dubbed “BenchmarkBooster.” Yes, your device takes steroids.</div>
于 2013-07-31T17:37:24.283 回答
0

以下技巧似乎有效：使背景图像的宽度是元素的两倍，并将背景位置的水平部分从 0 更改为-200%（已编辑的 FIDDLE）：

.view {
    height:100%;
    width:100%;
    animation:mymove 5s linear infinite;
    background-size: 200% 100%; /* horizontal scale is 200% */
}
@keyframes mymove {
    from {
        background-position: 0% 0px;
    }
    to {
        background-position: -200% 0px; /* shifting the image to right by its full width */
    }
}

在这个答案background-position中很好地解释了在负百分比时移动图像的算法。

于 2013-07-31T18:15:05.157 回答