html - css を使用して領域を明るくする

Question

http://asifslab.com ロゴが配置されているロゴの背後と近くの領域を明るくしたい。これは、ロゴの境界線が背景に混ざっているためです。助けてください

Answer 1

ロゴの背後の領域を柔らかく明るくするには、rgba 背景、丸みを帯びた境界線、画像上の明るい影の組み合わせを使用できます。

.head > img {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

すべてのブラウザーをサポートするためにベンダー プレフィックスを追加することを忘れないでください...

Answer 2

これは2つの方法で行うことができます1text-shadowが、画像を使用しているため、フォトショップでこれを行う必要がlayer style > drop shadowあり、明るい色を選択する必要があります。これもこれを行うことができますが、ロゴテキストの後ろではなく長方形でカバーされます

と

2は、長方形の形でも同じ効果を持つ背景を使用することです。background:rgba(255,255,255,0.6); 最後の0.6は、不透明度を調整して、色を暗くしたり、色を明るくしたりします。

Answer 3

できるよ

1. PNGに変換し、元の画像を0.2不透明度にします
2. （より良い）<div>位置であるaを持っている：絶対内側bodyと同じ高さ、そしてbodyを適用するbackground imageopacity: 0.2; filter: alpha(opacity=20);

Answer 4

CSS3をお試しください

.box_shadow {
  -webkit-box-shadow: 0px 0px 10px 0px #fff; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
          box-shadow: 0px 0px 10px 0px #fff; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */
}

Answer 5

rgba プロパティで背景を追加して、偽の明るい背景を与えることができます。

これを試して

#logo {
   background-color: rgba(255,255,255, 0.5);
   /* Then other css */
}

あなたの場合、.headをこれに変更します

.head {
  padding-left: 5%;
  background-color: rgba(255,255,255,0.5);
}

Answer 6

あなたが言う「境界」は、の余白bodyです。これを削除するには、次のようにします。

body { margin:0; }

あなたができることは、.head仕切りに不透明な背景を与えることです:

.head { background:rgba(255,255,255,0.3); }

ただし、これは古いブラウザではサポートされていません。