如何更換使用HTML5/CSS3技術，圖像

看到該圖片 enter image description here 或這裏http://cl.ly/image/0a2R2V0C1y2l 如何更換使用HTML5/CSS3技術，圖像

我們有一個使用這個圖像作爲背景圖像

.header_background{ 
    display: inline-block; 
    position: relative; 
    top: 10px; left: 0; right: 0; bottom: 0; 
    background-image: url(../img/header-back.png); 
    height: 47px; 
    width: 899px; 
    float: right; 
}

它有圓角和梯度一個div。

我們將在div內放入其他html文本，更多div元素和圖像按鈕。

有沒有辦法讓我不使用圖像的氣泡，但使用html5/css3技術？

來源

2012-09-26 Kim Stacks

入住這live demo

這裏是代碼：

.header_background { 
    position: relative; 
    background: #FFF; 
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwLjUiIHN0b3AtY29sb3I9IiNGRkZGRkYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNDQ0NDQ0MiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZzEpIiAvPjwvc3ZnPg==); 
    background-image: -webkit-gradient(linear, center top, center bottom, color-stop(50%, #FFFFFF), color-stop(100%, #CCCCCC)); 
    background-image: -webkit-linear-gradient(top, #FFFFFF 50%, #CCCCCC 100%); 
    background-image: -moz-linear-gradient(top, #FFFFFF 50%, #CCCCCC 100%); 
    background-image: -ms-linear-gradient(top, #FFFFFF 50%, #CCCCCC 100%); 
    background-image: -o-linear-gradient(top, #FFFFFF 50%, #CCCCCC 100%); 
    background-image: linear-gradient(to bottom, #FFFFFF 50%, #CCCCCC 100%); 
    border: 1px solid #CCC; 
    padding:10px; 
    -moz-border-radius:5px; 
    -webkit-border-radius:5px; 
    border-radius:5px; 
} 
.header_background:after, .header_background:before { 
    right: 100%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
} 

.header_background:after { 
    border-color:transparent; 
    border-right-color: #FFF; 
    border-width: 5px; 
    top: 50%; 
    margin-top: -5px; 
} 
.header_background:before { 
    border-color:transparent; 
    border-right-color:#CCC; 
    border-width: 6px; 
    top: 50%; 
    margin-top: -6px; 
}

我用這個online gradient maker tool，css arrow please和修改一點點。

data:image/svg+xml;base64,...etc...是在base64上編碼的內聯SVG圖像。這將在IE9上渲染漸變，它不支持任何純粹的CSS3漸變特徵。

其實它is supported by other modern browsers（FF13 +，Opera12 +），但作爲Lea Verou reported它比純CSS3漸變慢，這就是爲什麼你仍然需要其他聲明。

對於IE8，您可以使用一個漸變濾鏡：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feffff', endColorstr='#eeeeee',GradientType=0);

這是非常直接的（GradientType=0指垂直，如果將其更改爲1，你就會有一個水平梯度）。問題是它也支持IE9！所以爲了避免重疊，你需要使用conditional comments。

在這個特定的情況下，我建議你...不要給一個該死的IE8。它只會顯示一個白色背景（這就是爲什麼我添加background:#FFF;作爲第一個聲明），這是完全正確的。

來源

2012-09-26 08:13:16 Giona

你好，爲什麼你有background-image：url（data ..在你的.header_background類中？ –

@ kimsia檢查我的編輯;） – Giona

謝謝@GionaF。我設法把你的鏈接和混合，並與來自http://css-tricks.com/examples/ShapesOfCSS/#的CSS代碼匹配。最後，我得到了我想要的。我甚至決定不支持IE9。 –

我們可以通過使用HTML5 + CSS3來實現無圖像背景。

請參閱教程bubble和gradient background CSS技巧。它會幫助你。

來源

2012-09-26 08:01:25 sureshunivers

如何更換使用HTML5/CSS3技術，圖像

回答

相關問題