Tetapkan kelegapan hanya kepada warna latar belakang, bukan kelegapan teks dalam CSS-tutorial css-php.cn

Tetapkan kelegapan hanya kepada warna latar belakang, bukan kelegapan teks dalam CSS

王林

Lepaskan： 2023-09-11 20:33:05

ke hadapan

1185 orang telah melayarinya

仅将不透明度设置为背景颜色，而不是 CSS 中文本的不透明度

Dalam CSS, kita boleh menetapkan latar belakang elemen HTML tertentu menggunakan sifat "latar belakang" CSS. Kadangkala, kita mungkin perlu mengurangkan kelegapan warna latar belakang tanpa menjejaskan kandungan elemen HTML.

Kami boleh mengurangkan kelegapan warna latar belakang dengan mengurangkan nilai pembolehubah alfa sambil memberikan nilai warna pada sifat "Warna Latar Belakang".

Tatabahasa

Pengguna boleh mengikut sintaks berikut untuk menetapkan kelegapan hanya kepada warna latar belakang dan bukan teks dalam CSS.

background: rgba(255, 0, 0, opacity);
   or
background-color: hsla(0, 100%, 30%, opacity);

Salin selepas log masuk

Pengguna boleh menetapkan warna latar belakang menggunakan 'rgba' atau 'hsla' di sini 'a' mewakili kelegapan alfa, yang nilainya antara 0 dan 1.

Contoh 1

Dalam contoh di bawah, kami telah mencipta elemen div HTML dan menetapkan warna latar belakang menggunakan atribut "latar belakang". Kami menggunakan nilai "rgba" untuk menetapkan warna latar belakang. Kami menetapkan warna "merah" ke latar belakang dengan kelegapan "0.1", yang pengguna boleh perhatikan dalam output.

<html>
<head>
   <style>
      .div {
         background: rgba(255, 0, 0, 0.1);
         height: 100px;
         width: 500px;
      }
   </style>
</head>
<body>
   <h3>Setting up the background opacity without affecting the content of the div element</h3>
   <div class = "div">
      Hello! How are you?
   </div>
</body>
</html>

Salin selepas log masuk

Contoh 2

Dalam contoh di bawah, kami menggunakan sifat CSS "warna latar belakang" untuk menetapkan latar belakang elemen div HTML. Selain itu, kami menggunakan nilai "hsla" untuk latar belakang dan nilai kelegapan alfa "0.2".

Pengguna boleh menambah atau mengurangkan nilai kelegapan antara 0 dan 1 dan melihat perubahan warna latar belakang.

<html>
<head>
   <style>
      .div {
         background-color: hsla(0, 100%, 30%, 0.2);
         height: 100px;
         width: 500px;
      }
   </style>
</head>
<body>
   <h3>Setting up the background opacity using the background-color: hsla CSS property without affecting the content of the div element </h3>
   <div class = "div">
      This is a content of the div element.
   </div>
</body>
</html>

Salin selepas log masuk

Contoh 3

Kami boleh memisahkan div latar belakang daripada div kandungan dan menetapkan warna latar belakang dengan kelegapan yang lebih rendah untuk elemen div.

Di sini kami mempunyai div ibu bapa. Dalam div induk kita mempunyai latar belakang dan div kandungan. Div latar belakang dan kandungan mempunyai dimensi yang sama seperti div induk. Kita boleh menetapkan atribut indeks-z bagi kedua-dua elemen div untuk memaparkan div kandungan di atas div latar belakang.

Selepas itu, kita boleh menggunakan sifat "kelegapan" CSS untuk menurunkan kelegapan hanya div latar belakang. Dengan cara ini kita boleh meletakkan div latar belakang di bawah div kandungan dan bermain dengan kelegapan div latar belakang.

<html>
<head>
   <style>
      #parent {
         width: 500px;
         height: 150px;
         position: relative;
      }
      #content {
         position: absolute;
         width: 100%;
         height: 100%;
         color: white;
         font-size: 1.2rem;
         top: 0;
         left: 0;
      }
      #background {
         background: blue;
         filter: alpha(opacity=30);
         position: absolute;
         height: 100%;
         width: 100%;
         top: 0;
         left: 0;
      }
   </style>
</head>
<body>
   <h3>Setting up the background opacity using the filter: alpha(opacity = value) CSS property without affecting the content of the div element </h3>
   <div id = "parent">
      <div id = "background"></div>
      <div id = "content"> This is the content of the div element.</div>
   </div>
</body>
</html>

Salin selepas log masuk

Pengguna belajar untuk menetapkan kelegapan warna latar belakang tanpa menjejaskan kelegapan teks atau kandungan div. Pengguna boleh mengurangkan kelegapan warna apabila menggunakan nilai "rgba" atau "hsla". Jika pengguna mempunyai imej atau apa-apa lagi sebagai latar belakang, mereka boleh mencipta div yang berasingan untuk latar belakang dan kandungan serta menurunkan kelegapan div latar belakang.

Atas ialah kandungan terperinci Tetapkan kelegapan hanya kepada warna latar belakang, bukan kelegapan teks dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!