CSSでテキストの不透明な背景の半透明効果を実現する方法-CSSチュートリアル-php.cn

CSSでテキストの不透明な背景の半透明効果を実現する方法

WBOY

リリース： 2021-11-26 18:45:41

オリジナル

5096 人が閲覧しました

方法: 1. width 属性と height 属性を使用して、テキスト要素のサイズを親要素と同じに設定します; 2. background 属性と rgba() 関数を使用して、テキストの不透明な背景を実現します半透明効果、構文「テキスト要素 {背景:rgba(255,255,255,透明値);}」。

CSSでテキストの不透明な背景の半透明効果を実現する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS でテキストの不透明な背景の半透明効果を実現する方法

CSS では、position 属性を使用して、それを絶対ビットに設定できます。テキスト要素を生成する絶対配置。静的配置以外の最初の親要素を基準にして配置されます。画像要素に対して絶対相対的に配置します。

background 属性と rgba() 関数を使用して、背景画像の透明度を設定します。

テキストの不透明な背景の半透明効果を設定する例を見てみましょう。例は次のとおりです:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style type="text/css">
.demo2-bg{
    background: url(1118.02.png);
    background-size: cover;
    width: 500px;
    height: 300px;
    position: relative;
}
.demo2{
    width: 500px;
    height: 300px;
    background:rgba(255,255,255,0.3);
}
</style>
</head>
<body>
<div class="demo2-bg">
    <div class="demo2">背景图半透明，文字不透明</div>
</div>
</body>
</html>

ログイン後にコピー

出力結果:

CSSでテキストの不透明な背景の半透明効果を実現する方法