創建漸變不透明度的覆蓋

-3

旗幟，我需要創建以下橫幅： http://schuub.net/banner.png 創建漸變不透明度的覆蓋

我的問題是，我怎麼可以創建一個從白色到透明這一gardient這部分地覆蓋在左邊的圖像。

我的HTML可以在這裏找到： http://schuub.net/banner.html

<!doctype html> 
<html lang="en"> 
<head> 

    <style> 
     body { 
      margin: 0 auto; 
      width: 1024px; 
     } 

     .my-banner { 
      background-repeat: no-repeat; 
      background-position: right -175px; 
      background-image: url("http://sphotos-c.ak.fbcdn.net/hphotos-ak-ash3/s720x720/3755_4323318453951_692396489_n.jpg"); 
      height: 200px; 
      width: 100%; 
      position: relative; 
      border:solid 1px; 
     } 

     .banner-data { 
      position: absolute; 
      left: 0; 
      top: 0; 
      width: 70%; 
      height: 100%; 
      background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */ 
      border:solid 1px; 
     } 
    </style> 
</head> 

<body> 
    <div class="my-banner"> 
     <div class="banner-data"> 
     </div> 
    </div> 
</body> 
</html>

乾杯，斯特凡

來源

2013-08-07 stefan

那你嘗試這樣做，沒有工作？ –

我更新了我的問題，鏈接到我的html： http://schuub.net/banner.html – stefan

請確保您使用實際代碼更新您的問題，而不僅僅是一個鏈接。看到這裏：http://meta.stackexchange.com/questions/125997/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it –

試試這個：

FIDDLE

HTML

<div class="my-banner"></div>

CSS

body { 
    margin: 0 auto; 
    width: 1024px; 
} 
.my-banner { 
    background-repeat: no-repeat; 
    background-position: right -175px; 
    background-image: url("http://sphotos-c.ak.fbcdn.net/hphotos-ak-ash3/s720x720/3755_4323318453951_692396489_n.jpg"); 
    height: 200px; 
    width: 1024px; 
    background: url('http://648290826.r.cdn77.net/wp-content/uploads/2013/02/slider2.jpg') no-repeat; 
} 
.my-banner:after { 
    content:" "; 
    height: 200px; 
    width: 1024px; 
    position: absolute; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    border: 1px solid black; 
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 0) 100%); 
    /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(33%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0))); 
    /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 0) 100%); 
    /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 0) 100%); 
    /* Opera 11.10+ */ 
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 0) 100%); 
    /* IE10+ */ 
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 0) 100%); 
    /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1); 
    /* IE6-9 */ 
}

來源

2013-08-07 14:20:26 Sbml

我更新了我的小提琴並添加了一個橫幅div。 – Sbml

Thx超快速反應！這不是我需要的東西。我需要第一個33％是完全白色的，以便我可以在那裏放置標籤並且它們具有高對比度 – stefan

只需使用此編輯器爲您的漸變生成代碼：http://www.colorzilla.com/gradient-editor /然後只需要替換背景的CSS代碼 – Sbml

既可以使用圖形設計軟件，如Photoshop，並使用圖片，或者使用下面的資源：http://www.colorzilla.com/gradient-editor/

這會自動創建漸變所需的CSS。

來源

2013-08-07 14:11:26

我已經使用這個編輯器，但還沒有成功。你會如此善良，看看我的代碼（我將更新這個問題，並用我使用的代碼擴展它） – stefan

創建漸變不透明度的覆蓋

回答

相關問題