Question

我疯了，因为两边的两张图片......在我的屏幕上（17＆＃34; fhd），Firefox一切看起来都很完美（IE反而错了）但是我尝试了更老的（不是17＆＃34;屏幕，他们看起来很糟糕。我连接另一个17＆＃34;电脑到42＆＃34;电视和它稍微好一点，但仍然不能接受......我应该怎样做才能让它们变好并固定在每个屏幕上？媒体查询？

here我想要它（以及我如何在我的电脑上用Firefox看到它）

here我如何看待其他电脑（以及我的电脑，但使用IE）

在this链接，您可以在浏览器上试用

有缺陷的那些显示左边更大并且在右边缘切割。右边更小更短（不覆盖从上到下的屏幕）

这是我现在的代码

#contenitore {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0px;
  left:0px;
  background-image: url(img/cl_at_small.jpg);
  background-size: contain;/*2000px 950px;
  background-repeat: repeat-x;*/
  z-index: -9999;
  -webkit-animation: animatedBackground 40s infinite;
  -moz-animation: animatedBackground 40s infinite;
  animation: animatedBackground 40s infinite;   
  -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
  -moz-animation-timing-function: linear;
  animation-timing-function: linear;
}

#imL{
  background-image: url(img/AT_X.jpg);
  background-size:cover;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  background-repeat:no-repeat;
  width: 10%;
  z-index: 9999;
}

#imR{
  position: fixed;
  right: -1px;
  top: 0;
  background-image: url(img/anno2015.jpg);
  background-size:contain;
  height: 100%;
  background-repeat:no-repeat;
  width: 10%;
  z-index: 9999;
}

@-moz-keyframes animatedBackground {
  0% {
    background-position: 0px 0px; }

  100% {
    background-position: -1400px 0px; } 
}

@-moz-keyframes animatedBackground {
  0% {
    background-position: 0px 0px; }

  100% {
    background-position: -1400px 0px; } 
}

@-webkit-keyframes animatedBackground {
  0% {
    background-position: 0px 0px; }

  100% {
    background-position: -1400px 0px; } 
}

@-webkit-keyframes animatedBackground {
  0% {
    background-position: 0px 0px; }

  100% {
    background-position: -1400px 0px; } 
}

谢谢

Answer 1

如果指定最小高度或将当前高度分类更改为px高度而不是％高度，该怎么办？

Answer 2

您使用"background-size: contain;"将"background-size: cover;"更改为#imR

试试这个

#imR {
      position: fixed;
      right: 0px;
      top: 0;
      background-image: url(img/anno2015.jpg);
      background-size: cover; //changed this
      height: 100%;
      background-repeat: no-repeat;
      width: 10%;
      z-index: 9999;
    }

Answer 3

我想你可能只是在你的CSS中混淆了：在图像中你的行为方式，你有

background-size: cover;

在右图中，您有：

background-size: contain;

将右图像切换为“覆盖”使它们至少表现相同。

css背景图片（和动画）

3 个答案: