2

さて、私は教育専攻で満たす必要のあるテクノロジークラスのHTMLコードを入力しています。これは私が私のバックグラウンドのために持っているものです：

body {
    background-image:url('islandbeach.jpg');
    background-repeat:repeat;
    background-position:center;
    background-attachment:fixed;
    background-size:cover;
}

ここで、背景を透明またはフェードさせて、テキストやその他の画像を表示できるようにします。背景がカラフルすぎて目を細めずに言葉を見ることができません。これを実行できるHTMLコードはありますか？私はこの分野のプロではありません。教授から言われたことをすべてフォローしているだけなので、答えがあれば、赤ちゃんのステップで説明してください。どうもありがとうございました！

4

3 に答える 3

1

これは、：afterプロパティを使用して実行できる簡単なハックです。

Cssコード 

        body:after {
            content: "";
            background-image:url('http://www.w3schools.com/css/klematis.jpg');
            background-repeat:repeat;
            background-position:center;
            background-attachment:fixed;
            background-size:cover;
            opacity: 0.5;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            position: absolute;
            z-index: -1;
        }

jsbinデモ http://jsbin.com/welcome/50098/

于 2012-11-17T04:56:33.763 に答える
1

これを試して

.bg {
    width:280px;
    height:100px;
    position:relative;
    display:block;
}

.bg:after {
    background: url(https://www.google.co.in/images/srpr/logo3w.png);
    opacity: .5;
    width:280px;
    height:100px;
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
    content: "";
}

これがjsfiddleファイルです

于 2012-11-17T05:04:50.117 に答える
1

オプション 1: 書くテキストや使用する画像が読みやすくなるように、色あせた背景を使用します。

オプション 2: Body タグには画像があり、クラス bgopc の div は、その上に白色で不透明度が低くなります...そのため、画像は透明になります。これで、id コンテナーを持つ他の div が、画像とコンテンツのコンテナーとして機能します。 

<body>
   <div class="bgopc">&nbsp;</div>
   <div id=container>Add your Text and Images inside this container </div>
</body>

これでCSSは

body {background-image:url('islandbeach.jpg');background-repeat:repeat;background-position:center;background-attachment:fixed;background-size:cover;}
.bgopc{max-height:100%;background:#fff;position:absolute;top:0;left:0;width:100%;
height:100%;opacity:0.4;filter:alpha(opacity=40);z-index:1}
#container{z-index:2;position:relative}

それがあなたの問題を解決することを願っています。

于 2012-11-17T05:17:54.820 に答える