关于'background-image'属性中具有相同值的多个背景图像;

问题描述：

.div{ 
 
      width: 200px; 
 
      height: 200px; 
 
      border-top:20px solid black; 
 
      border-bottom:20px solid black; 
 
      background-position: 0%,100%; 
 
      -webkit-background-size: 20px 100%; 
 
      -moz-background-size: 20px 100%; 
 
      background-size: 20px 100%; 
 
      background-repeat: no-repeat; 
 
      background-image: linear-gradient(to bottom, red, green), linear-gradient(to bottom, red, green); 
 
     }

<div class="div"></div>

当我使用多背景，为什么设置在background-image属性的值相同，但第一背景图像不被第二image.I覆盖感到很困惑，任何人都知道吗？在此先感谢;

好吧，对不起，没有人能够理解这个问题，也许是因为我的描述太糟糕了。我的均值是我设置两个值与线性渐变的背景图像“属性设置两个背景图片，看看这个：

background-image:linear-gradient(to bottom, red, yellow),linear-gradient(to bottom, red, yellow);

并设置其他背景属性相同，看看这个：

background-position:0%,100%; 
background-size:20px 100%;

好吧，这两个背景图片的所有属性都是相同的，所以第一个背景图片应该覆盖第二张图片，但不是，它们显示在左侧和右侧，为什么？

阿南你好，你的问题是很难理解。请考虑使用完整的，语法正确的问题陈述句子。 –

我们无法首先理解您的查询改善您的问题如果可能的话，您可以分享屏幕截图或粗略草图，以确定您正在寻找什么？所以我们可以帮助你。 –

只搜索我认为是你的问题：你应该看看[这个关于多个背景的链接]（http://www.css3.info/preview/multiple-backgrounds/）。 – jeerbl

答

这种风格

background-size:20px 100%;

意味着背景的水平尺寸为20像素。由于只有一个值，它适用于两个渐变。

这等风格

background-position:0%,100%;

有2个值，所以第一个应用于第一梯度。在这种情况下，位置0％表示完全离开。第二个适用于第二个渐变，在这种情况下，100％表示完全正确。

这种差异也适用于垂直的位置，但由于坡度的大小为100％，它不具有任何影响

太棒了！官方网站解释了background-position属性设置了背景图像的起始位置。但我不知道何时有多个背景图像，它设置了多个起点;谢谢！ – Anan

关于'background-image'属性中具有相同值的多个背景图像;

相关推荐