CSSを使って背景画像を透明にする方法

CSSで背景画像を透明にするために必要な属性はopacity属性ですが、文字がある場合は文字が透明にならないように要素を区切る必要があります。

背景画像を透明にする CSS のプロパティは不透明度プロパティですが、これを使用してテキストを含むコンテンツを作成すると、テキストが中身も透明になります。

次に、背景画像のみを透明にするCSSを書いてみましょう。

まずHTMLコードを見てみましょう。

<div class="content">
    <div class="bg"></div>
    <p>蒲公英</p>
</div>

.bgは空のdivで、その外側に「Dandelion」と書かれています。

つまり、position 属性は、「タンポポ」を画像の上に配置するために使用されます。具体的なコード例を見てみましょう。

まず、相対位置を指定します (position:相対;) .content へ。

#背景の透明度を理解しやすくするために、最初に黒の背景を与えます

#

.content{
    width: 450px;
    height: 300px;
    background: #000;
    position: relative; /*相对位置*/
}
p{
    color: #fff;
    font-weight: bold;
    text-align: center;
}

効果は次のとおりです:

# #次に、.bgを設定しましょう

幅と高さを100%に設定し、位置を左上の絶対位置(left:0; top: 0;)に設定します。

.bg{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(img/pugongying.jpg);
    background-size: cover;
    opacity: 0.5;
}

効果は次のとおりです:

実際には、文字は透明な画像の下にあります。

したがって、絶対位置で固定された背景画像と比較して、p の内容が前になければなりません。

したがって、p には、position:Absolute; を指定することによって、重なり順を与えることもできます。 (position:Absolute; と記述されているため、z-index を使用して重なり順を操作することもできます。)

最後にテキストを中央の位置に移動します

p{
    width: 100%;
    height: 1.5em;
    color: #fff;
    font-weight: bold;
    text-align: center;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
}

効果は次のとおりです:

以上がCSSを使って背景画像を透明にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。