0

この画像ここに画像の説明を入力してくださいまたはここhttp://cl.ly/image/0a2R2V0C1y2lを参照してください

この画像を背景画像として使用するdivがあります

.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要素、画像ボタンなどの他のhtmlをdiv内に配置します。

吹き出しに画像を使用せずにhtml5/css3テクニックを使用する方法はありますか？

4

2 に答える 2

1

HTML5+CSS3 を使用することで、画像のない背景を実現できます。

バブルとグラデーションの背景のCSS トリックについては、チュートリアルを参照してください。それはあなたを助けるでしょう。

于 2012-09-26T08:01:25.747 に答える
1

このライブデモをチェック

コードは次のとおりです。

.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;
}​

私はこのオンライン グラデーション メーカー ツールを使用しました。

data:image/svg+xml;base64,...etc...base64 でエンコードされたインライン SVG イメージです。これにより、純粋な CSS3 グラデーション機能をサポートしていない IE9 でグラデーションがレンダリングされます。

実際には、他の最新のブラウザー(FF13+、Opera12+) でサポートされていますが、Lea Verou が報告したように、純粋な CSS3 グラデーションよりも遅いため、他の宣言が必要です。

IE8 では、グラデーション フィルターを使用できます。

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

これは非常に簡単です（GradientType=0は垂直を意味し、変更すると1水平グラデーションになります）。問題は、IE9 でもサポートされていることです。したがって、重複を避けるには、条件付きコメントを使用する必要があります。

この特定のケースでは、IE8について気にしないことをお勧めします。白い背景が表示されるだけです（そのためbackground:#FFF;、最初の宣言として追加しました）。これはまったく問題ありません。

于 2012-09-26T08:13:16.073 に答える