帶有小圖片的背景圖片使得漸變

我正在使用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

回答

相關問題