WebデザインのCSSで背景を透明にする方法（例）-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

WebデザインのCSSで背景を透明にする方法（例）

藏色散人

Aug 25, 2018 pm 05:36 PM

Web デザインでは、CSS 背景の透明テキストの不透明効果を実現する必要がある場合があります。では、CSS を使用して背景を透明にするにはどうすればよいでしょうか?この記事ではCSSを使って背景を透明、文字を不透明に設定する方法を紹介します。困っている友達の助けになれば幸いです。

CSS背景透明テキスト不透明の具体的なコード例は以下の通りです:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css div背景透明示例</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }

        body{
            padding: 50px;
            background: url(img/2.png) 0 0 repeat;
        }

        .demo{
            padding: 25px;
            background-color: rgba(0,0,0,0.5);/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
        }
        .demo p{
            color: #FFFFFF;
        }
    </style>
</head>
<body>
<div class="demo">
    <p>css背景透明文字不透明</p>
</div>
</body>
</html>

効果は以下の通りです:

WebデザインのCSSで背景を透明にする方法（例）

上の図から、CSSが透明divの効果を達成していることがはっきりとわかります。背景と不透明なテキスト。ここでマスターする必要がある知識ポイントは、背景色の rgba() 関数です。 CSS で rgba(0,0,0,0.5); という形式を使用して rgha を表します。最後のパラメータは、透明度を表すアルファチャネルを表します。

ところで、CSSで色を定義するには、カラーメソッド(RGB、RGBA、HSL、HSLA)を使用する方法、16進数のカラー値、および事前定義されたカラー名を使用する方法の3つがあります。 RGBAとは、レッド（赤）、グリーン（緑）、ブルー（青）、アルファ（不透明）の3つの単語の略称です。

値:

R	赤色の値。正の整数 \|
G	green 値。正の整数 \|
B	青の値。正の整数 \|
A	アルファの透明度。値は 0 ～ 1 です。

ということで、CSSを使用して背景の透明度とテキストの不透明度を設定する効果についての上記の紹介を通じて、困っている友人の役に立てば幸いです。

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

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Draggin＆＃039;ドロップピン＆＃039;反応でApr 17, 2025 am 11:52 AM

React Ecosystemは、すべてがドラッグアンドドロップの相互作用に焦点を合わせている多くのライブラリを提供します。 React-Dnd、React-Beautiful-Dnd、

高速ソフトウェアApr 17, 2025 am 11:49 AM

最近、高速ソフトウェアについて素晴らしい相互接続されたことがいくつかありました。

バックグラウンドクリップ付きのネストされたグラデーションApr 17, 2025 am 11:47 AM

バックグラウンドクリップをすべて頻繁に使用すると言うことができます。私は、日々のCSS作業ではほとんど使用されていない＆＃039; dを賭けています。しかし、私はステファン・ジュディスの投稿でそれを思い出しました、

ReackAnimationFrameを使用してReact Hooksを使用しますApr 17, 2025 am 11:46 AM

RequestAnimationFrameでアニメーション化するのは簡単なはずですが、Reactのドキュメントを徹底的に読んでいない場合は、おそらくいくつかのことに遭遇するでしょう

ページの上部にスクロールする必要がありますか？Apr 17, 2025 am 11:45 AM

おそらく、それをユーザーに提供する最も簡単な方法は、要素上のIDをターゲットにするリンクです。だから...

Best（GraphQL）APIはあなたが書くものですApr 17, 2025 am 11:36 AM

聞いてください、私はGraphQLの専門家ではありませんが、私はそれで働くことを楽しんでいます。フロントエンド開発者としてデータを公開する方法はかなりクールです。メニューのようなものです

毎週のプラットフォームニュース：テキスト間隔のブックマークレット、トップレベルの待望、新しいアンプロードインジケーターApr 17, 2025 am 11:26 AM

今週のラウンドアップ、タイポグラフィを検査するための便利なブックマークレットである。

ボーダー半径を保存しながら箱を拡張するためのさまざまな方法Apr 17, 2025 am 11:19 AM

私は最近、Codepenの興味深い変化に気づきました。ホームページにペンをホバリングすると、丸い角が背面に拡大する長方形があります。

See all articles

ホットAIツール

ホットツール

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、