Rumah >hujung hadapan web >tutorial css >Bagaimana untuk mencapai kesan lut sinar latar belakang legap dalam css

Bagaimana untuk mencapai kesan lut sinar latar belakang legap dalam css

WBOYasal: 2021-11-26 18:45:415152semak imbas

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);}".

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>

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!

html5 css css3 Static position background

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk menetapkan ketelusan imej dalam css untuk membuat imej hilang secara beransur-ansurArtikel seterusnya：Bagaimana untuk menetapkan ketelusan imej dalam css untuk membuat imej hilang secara beransur-ansur

Artikel berkaitan

Lihat lagi