Adakah membuat bayangan teks menggunakan css sesuai untuk imej?-Soal Jawab bahagian hadapan-php.cn

Jadual Kandungan

文本阴影！

Rumah

hujung hadapan web

Soal Jawab bahagian hadapan

Adakah membuat bayangan teks menggunakan css sesuai untuk imej?

Sep 06, 2022 pm 05:29 PM

css

Tidak berkenaan; bayangan teks "bayang-teks" hanya boleh digunakan pada teks, bukan pada imej. Jika anda ingin menambah kesan bayang-bayang pada gambar, terdapat dua kaedah: 1. Gunakan bayang-bayang sempadan kotak-bayang, sintaks "bayang-kotak: bayang-bayang mendatar bayang-bayang kabur menyebarkan inset;" 2. Gunakan penapis penapis, sintaks "filter:drop -shadow(bayang mendatar bayang-bayang menegak kabur warna penyebaran);".

Adakah membuat bayangan teks menggunakan css sesuai untuk imej?

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

Bayang teks ciptaan css tidak berfungsi untuk imej.

Bayang teks "bayang-teks" hanya boleh digunakan pada teks teks dan tidak berfungsi pada imej.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css文本阴影text-shadow</title> 
        <style> 
            h1 { 
                color: red; 
                text-shadow: 3px 5px 5px #656B79; 
            }
			img{
				text-shadow: 3px 5px 5px #656B79; 
			}
        </style> 
    </head> 
    <body> 
        <h1 id="文本阴影">文本阴影！</h1>
		<img  src="/static/imghw/default1.png"  data-src="img/1.jpg"  class="lazy"      style="max-width:90%" / alt="Adakah membuat bayangan teks menggunakan css sesuai untuk imej?" >
    </body> 
</html>

Salin selepas log masuk

Adakah membuat bayangan teks menggunakan css sesuai untuk imej?

Anda boleh melihat bahawa terdapat kesan bayang pada teks, tetapi tidak pada gambar.

Untuk menambah kesan bayang pada imej, terdapat dua kaedah:

atribut bayang-kotak
penapis: drop -shadow()

Izinkan saya memperkenalkan kepada anda

1 Gunakan atribut box-shadow

box-. atribut bayangan Menambah satu atau lebih bayang-bayang pada kotak.

Sintaks: box-shadow: h-shadow v-shadow blur spread color inset;

h-bayangan Diperlukan. Kedudukan bayang mendatar. Nilai negatif dibenarkan.
v-shadow Diperlukan. Kedudukan bayang menegak. Nilai negatif dibenarkan.
kabur Pilihan. Jarak kabur.
sebarkan Pilihan. Saiz bayang.
warna Pilihan. Warna bayang. Lihat nilai warna CSS.
inset Pilihan. Tukar bayang luar (permulaan) kepada bayang dalam.

Contoh:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			img {
				box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
				/*考虑浏览器兼容性*/
				-moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
				-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
			}
		</style>
	</head>
	<body>
		<img  src="/static/imghw/default1.png"  data-src="img/1.jpg"  class="lazy"      style="max-width:90%" / alt="Adakah membuat bayangan teks menggunakan css sesuai untuk imej?" >
	</body>
</html>

Salin selepas log masuk

Adakah membuat bayangan teks menggunakan css sesuai untuk imej?

2. Gunakan penapis:drop-shadow()

Atribut penapis mentakrifkan kesan visual (seperti kabur dan tepu) elemen (biasanya Adakah membuat bayangan teks menggunakan css sesuai untuk imej? ).

drop-shadow() boleh menetapkan kesan bayang-bayang pada imej. Bayang-bayang digubah di bawah imej dan boleh dikaburkan, mengimbangi versi matte yang boleh dicat dalam warna tertentu.

Sintaks: filter:drop-shadow(h-shadow v-shadow blur spread color);

Contoh:

img {
	-webkit-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, .5));
	/*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */

	filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, .5));
}

Salin selepas log masuk

Adakah membuat bayangan teks menggunakan css sesuai untuk imej?

(Pembelajaran perkongsian video: pembangunan bahagian hadapan web )

Atas ialah kandungan terperinci Adakah membuat bayangan teks menggunakan css sesuai untuk imej?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

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