Bagaimana untuk Melaraskan Kelegapan Imej Latar Belakang Div Sahaja?

Kelegapan untuk Imej Latar Belakang Div Sahaja

Dalam reka bentuk web, menetapkan tahap kelegapan yang betul boleh meningkatkan daya tarikan visual elemen pada halaman anda. Walau bagaimanapun, ia boleh mencabar untuk melaraskan kelegapan imej latar belakang tanpa menjejaskan elemen lain dalam bekas yang sama. Begini cara anda boleh mencapai kesan ini:

Satu kaedah melibatkan penggunaan unsur pseudo CSS, seperti yang dicadangkan dalam soalan:

.myDiv {
  background-image: url("your_image.png");
  opacity: 0.5;
}

.myDiv::before {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Ini mewujudkan elemen tersembunyi (::sebelum) itu menindih imej latar belakang dan menetapkan kelegapannya kepada 0.5, sambil meninggalkan teks dalam div tidak terjejas.

Walau bagaimanapun, anda juga boleh mencapai kesan yang sama menggunakan pendekatan yang lebih mudah:

.myDiv {
  background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("your_image.png");
}

Kaedah ini mencipta kecerunan linear dengan dua hentian warna, di mana kedua-dua hentian menentukan separa lutsinar warna putih (#FFFFFF) dengan kelegapan 0.5, diikuti dengan imej latar belakang. Ini memastikan bahawa imej latar belakang muncul dengan kelegapan 50%, manakala teks di dalam div kekal kelihatan sepenuhnya.

Atas ialah kandungan terperinci Bagaimana untuk Melaraskan Kelegapan Imej Latar Belakang Div Sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!