带有小图片的背景图片使得渐变

我正在使用1px * 2px的图片的背景图片属性。这个想法是在左边有黑色，在右边是白色（每个1px），因为我有一张左边黑色和右边白色的图片。带有小图片的背景图片使得渐变

什么，我做的结果是，有黑色和白色之间的梯度，但我不希望因为我们看到的梯度（梯度比画面宽度大）

这里是代码内嵌要快：

<body> 
    <div class="header-wrapper" style= 
    'background-image: url("../images/background.png"); background-repeat: no-repeat; background-size: 100%; padding-bottom: 0px;'> 
    <div style="text-align:center;"> 
      <div style='display:inline;'><img src="~/images/ban.png"></div> 
     </div> 
    </div> 
</body>

的jsfiddle：http://jsfiddle.net/8gksgtdu/2/

我不想使用CSS梯度浏览器的兼容性，即使只有客户只要求兼容IE9，直到。

下面是结果我： what I got

这里是我想要的 What I would do

来源

2015-07-13 clement

你的问题是什么？ –

你可以上传你的图片到http://imgur.com/，然后在http://www.jsfiddle.com/上重新创建它吗？ –

你可以创建一个演示吗？很难看出为什么你会得到这个渐变，除非你的图像本身具有它。 – Harry

我不知道你想做的事，但如果你想要一个图像streched，然后把

background-size: 100% 100%

这将使得图像大，streched

--edit- -

我看到你有一个100％，试图把两台100％

- 编辑---

把X-UA兼容头标签

<meta http-equiv="X-UA-Compatible" content="IE=7; IE=8; IE=9">

似乎是修复背景100％的问题。

来源

2015-07-13 10:16:20 Dickens

他已经在他的代码中有这个。 –

你的编辑不会有所作为。 'background-size：100％'与'background-size：100％100％'相同。如果高度和宽度不同，只需输入两个值。 –

您可以在头标签中引入** X-UA兼容**，以使浏览器兼容性错误 – Dickens

为什么你不使用渐变？

background-image: linear-gradient(to right, #000 50%, #fff 50%);

演示：JSFiddle

来源

2015-07-13 10:18:56 KittMedia

是的，抱歉，如果我的问题不是很清楚，但是有，我有渐变我不想！查看我编辑的问题 – clement

请先尝试我的代码。这正是你想要做的事情，因为黑人以最大的力量跑到50％，然后以白色开始。在这种情况下没有真正的渐变。 – KittMedia

你并不需要使用背景图片，您可以使用CSS梯度把它关闭：

.black-white { 
 
    height: 300px; 
 
    width: 300px; 
 
    border: 1px solid red; 
 
    background: #000000; /* Old browsers */ 
 
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); /* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
 
    background: -moz-linear-gradient(left, #000000 0%, #000000 50%, #ffffff 50%, #ffffff 100%); /* FF3.6+ */ 
 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(50%,#000000), color-stop(50%,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */ 
 
    background: -webkit-linear-gradient(left, #000000 0%,#000000 50%,#ffffff 50%,#ffffff 100%); /* Chrome10+,Safari5.1+ */ 
 
    background: -o-linear-gradient(left, #000000 0%,#000000 50%,#ffffff 50%,#ffffff 100%); /* Opera 11.10+ */ 
 
    background: -ms-linear-gradient(left, #000000 0%,#000000 50%,#ffffff 50%,#ffffff 100%); /* IE10+ */ 
 
    background: linear-gradient(to right, #000000 0%,#000000 50%,#ffffff 50%,#ffffff 100%); /* W3C */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff',GradientType=1); /* IE6-8 */ 
 
}

<!--[if gte IE 9]> 
 
    <style type="text/css"> 
 
    .black-white { 
 
     filter: none; 
 
    } 
 
    </style> 
 
<![endif]--> 
 
<div class="black-white"></div>

从生成here。

来源

2015-07-13 10:24:35

渐变不符合IE9。我没有说，但它必须符合，但是，谢谢 – clement

它可以。我编辑了我的答案。 –

@clement如果您单击我答案底部的链接，它会将您带到某个地方以生成渐变。右下角有一个“IE9支持”复选框。 –

你能不能用一对夫妇更断点：

background: linear-gradient(to right, #000000 0%,#000000 90%,#ffffff 90%,#ffffff 90%,#ffffff 100%);

http://jsfiddle.net/8gksgtdu/1/

来源

2015-07-13 10:26:22

我终于用一个更大的画面比第一，我提出（1 * 2至4 * 8像素），它MLY固定问题 - 梯度还在这里，但最小化（少宽）

来源

2015-07-13 10:52:42 clement

另外，您可以使用伪类：

.header-wrapper { 
 
    text-align:center; 
 
    background-color:white; 
 
    position:relative; 
 
} 
 
.header-wrapper:before { 
 
    content: ''; 
 
    position:absolute; 
 
    top:0; 
 
    bottom:0; 
 
    left:0; 
 
    right:50%; 
 
    background-color:black; 
 
    z-index:50; 
 
} 
 
.header-wrapper img { 
 
    display:inline-block; 
 
    z-index:100; 
 
    position:relative; 
 
}

<div class="header-wrapper"><img src="http://i.imgur.com/1Nidg46.png" /></div>

来源

2015-07-13 10:53:41

回答

相关问题