So stellen Sie Hintergrundgrau und Transparenz in CSS3 ein-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

So stellen Sie Hintergrundgrau und Transparenz in CSS3 ein

Dec 10, 2021 pm 02:15 PM

css

Methode: 1. Verwenden Sie das Hintergrundattribut, um die Hintergrundfarbe auf Grau zu setzen. Fügen Sie einfach den Stil „background:#c0c0c0;“ zum Element hinzu. 2. Verwenden Sie das Deckkraftattribut, um die Transparenz des Elements festzulegen. opacity: Transparenzwert;“ „Stil ist genug.

So stellen Sie Hintergrundgrau und Transparenz in CSS3 ein

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

So stellen Sie den Hintergrund in CSS3 auf grau und transparent ein

In CSS können Sie das Hintergrundattribut verwenden, um den Hintergrund auf grau zu setzen. Fügen Sie dem Element einfach den Stil „Hintergrund: #c0c0c0“ hinzu.

In CSS können Sie das Opazitätsattribut verwenden, um die Transparenz eines Elements festzulegen. Gibt die Deckkraft an. Von 0,0 (vollständig transparent) bis 1,0 (vollständig undurchsichtig).

Das Beispiel sieht wie folgt aus:

<!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>
</head>
<body>
    <style>
      .div1{
        width:200px;
        height:200px;
        background:#c0c0c0 ;
      }
      .div2{
        width:200px;
        height:200px;
        background:#c0c0c0;
        opacity:0.5;
      }
    </style>
    设置灰色：
<div class="div1"></div>
设置灰色且透明度：
<div class="div2"></div>
</body>
</html>

Nach dem Login kopieren

Ausgabeergebnis:

So stellen Sie Hintergrundgrau und Transparenz in CSS3 ein

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo stellen Sie Hintergrundgrau und Transparenz in CSS3 ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn