图像不适合屏幕

在我的红宝石轨道Web应用程序中，我有一个图像由两种颜色组成，第一部分是黑色，第二部分是蓝色。当我在背景上设置该图像中，图像被重复：图像不适合屏幕

body { 
    background:url("bg.png"); 
}

但是当我使用的图像的repeatation如下除去：

body { 
    background:url("bg.png") 0 0 repeat-x; 
}

但垂直其不适合在屏幕上，

enter image description here

它覆盖在屏幕的2 /第三部分。黑色部分是合适的，但蓝色部分不覆盖剩余的屏幕，我想只增加图像的蓝色部分不是黑色，这是可能的。

请告诉我，等待您的回复。谢谢。

来源

2014-06-19 user88

您无法在单个元素上重复一半的图像。 – Amadan

然后我会怎样解决这个问题。 – user88

有什么方法可以在图像的蓝色部分重复。 – user88

不同元素

使用背景图像是一门艺术

我建议使用两个元素 - 一个“NAV”元素&然后设置body的背景的蓝色渐变。您可以使用background-size: cover属性，使这项工作：

http://jsfiddle.net/wM2B7/

#app/assets/stylesheets/application.css.scss 
body { 
    background: url("gradient.png"); 
    background-size: cover; 
} 

nav { 
    height: 45px; 
    display: block; 
    background: url("black.png") 0 0 repeat-x; 
}

这将允许你给具有单一背景图像的错觉，同时保持具有多个元素的IE的body的灵活性（造型将代表正文，nav造型将代表nav）

来源

2014-06-19 07:11:33

可以将CSS3渐变与背景图像一起使用。有关详细信息，请参阅此Q&A。

创建一个只是黑色部分的背景图像，然后使用CSS渐变创建蓝色部分。

来源

2014-06-19 06:40:09 RaneWrites

图像不适合屏幕

回答

相关问题