1

テクスチャ付きの背景画像を HTML5 タグで正しく表示するのに最も苦労しています。具体的には、クロスブラウザーグラデーションが既に適用されているタグに、不透明度の低い水彩塗りの .png テクスチャを追加しようとしています。グラデーションはうまく表示されますが、背景画像が正しく表示されません。

そのための CSS コマンドは簡略化されていると言われました。

background:url("filepath");

使用している引用符の種類の問題ですか? 一重引用符か二重引用符かは関係ありませんか? それともまったく引用符がありませんか？引用符がセレクターに何をしているのかわかりませんか、それとも背景画像とグラデーションを適用できないのですか? 私が変更しようとしているスペースは、http://www.zeldezine.info/demo/の明らかなフッター位置で確認できます。

ありがとう！

4

2 に答える 2

3

背景画像とグラデーションを同じ要素に追加することはできません。引用符に関しては、それらが単一か、二重か、まったくないかは問題ではありません。画像パスが正しいことを確認してください。

両方が必要な場合は、次のようにすることができます。

http://jsfiddle.net/vjEh7/

CSS:

footer {
    background: rgb(169,3,41);
    background: -moz-linear-gradient(top,  rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1)));
    background: -webkit-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
    background: -o-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
    background: -ms-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
    background: linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
}
div {
    width: 150px;
    height: 160px;
    background: url(http://www.zeldezine.info/demo/img/logo_bottom.png) no-repeat;
}

HTML:

<footer>
    <div></div>
</footer>
于 2012-04-24T00:04:59.347 に答える
0

これを試して：

body
{
  background-image:url('images/image.jpg');
  background-repeat:repeat;
}
于 2012-04-24T00:04:02.070 に答える