Bagaimana untuk mencapai kesan lut sinar latar belakang legap dalam css-tutorial css-php.cn

Bagaimana untuk mencapai kesan lut sinar latar belakang legap dalam css

WBOY

Lepaskan： 2021-11-26 18:45:41

asal

5114 orang telah melayarinya

Kaedah: 1. Gunakan atribut lebar dan ketinggian untuk menetapkan saiz elemen teks agar sama dengan elemen induk 2. Gunakan atribut latar belakang dan fungsi rgba() untuk mencapai latar belakang legap teks kesan lut sinar, sintaks "elemen teks {latar belakang :rgba(255,255,255,nilai lutsinar);}".

Bagaimana untuk mencapai kesan lut sinar latar belakang legap dalam css

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Cara mencapai kesan lut sinar latar belakang legap dalam css

Dalam css, anda boleh menggunakan atribut kedudukan dan menetapkannya kepada teks bit mutlak penjanaan elemen Kedudukan mutlak, diposisikan relatif kepada elemen induk pertama selain daripada kedudukan statik. Letakkannya secara relatif kepada elemen imej.

Gunakan atribut latar belakang dan fungsi rgba() untuk menetapkan ketelusan imej latar belakang.

Mari kita ambil contoh untuk melihat cara menetapkan kesan lut sinar latar belakang legap Contohnya adalah seperti berikut:

<!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>

Salin selepas log masuk

Hasil keluaran:

<.> Bagaimana untuk mencapai kesan lut sinar latar belakang legap dalam css

(Mempelajari perkongsian video:

tutorial video css)

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan lut sinar latar belakang legap dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!