css实现背景图片半透明内容不透明代码分享
本文主要和大家介绍了纯css实现背景图片半透明内容不透明的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考，希望能帮助到大家。
最近做一个登陆界面的，突然想使用这种背景图片透明，而内容不透明的效果，这里我就说一说我的两个思路吧。
效果展示
半透明
不透明
常见的失败做法
最常见的做法事设置元素的opacity,这种设置出来的效果就是内容与背景都事半透明的，严重影响视觉效果。
还有就是设置background-color:rgba(),这种方式只能设置背景颜色的透明度。
正确姿势
我想到两个方法，第一个就是利用伪元素::before,我们通过给伪元素添加背景并且将伪元素的设置伪元素的背景透明度来实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆</title>
<style type="text/css">
body{
background-image:url(images/bird.jpg);
background-repeat: no-repeat;
background-size:100%;
}
.login_box::before{
content:"";
/*-webkit-filter: opacity(50%);
filter: opacity(50%); */
background-image:url(images/love.jpg);
opacity:0.5;//透明度设置
z-index:-1;
background-size:500px 300px;
width:500px;
height:300px;
position:absolute;
//一定要设置position:absolute,这样才能设置z-index，让背景处于内容的下一层
top:0px;
left:0px;
border-radius:40px;
}
.login_box{
position:fixed;
left:50%;
top:200px;
width:500px;
height:300px;
margin-left:-250px;
border-radius:40px;
box-shadow: 10px 10px 5px #888;
border:1px solid #666;
text-align:center;
}
form{
display:inline-block;
margin-top:100px;
}
input{
display:block;
width:250px;
height:30px;
background-color: #888;
border:1px solid #fee;
outline:none;
border-radius:10px;
}
input[type="submit"]{
width:100px;
height:30x;
margin-left: 70px;
background-color: #ccc;
}
span{
color:red;
font-size:15px;
}
</style>
</head>
<body>
<p class="login_box">
<form action=<?php echo $_SERVER['PHP_SELF'] ?> method="post">
<input type="text" name="nickname">
<span><?php echo $nameERR; ?></span>
<br>
<input type="password" name="password">
<span><?php echo $passwordERR; ?></span>
<br>
<input type="submit" value="登陆">
</form>
</p>
</body>
</html>还有一种方法与伪元素异曲同工，我们可以通过设置不通的p，里面的p放置内容，父级p设置背景，然后给它设置透明度，大概布局如下：
<p class="bg">
<p class="content">
一些内容
</p>
</p>这样也可以达到同样的效果。
相关推荐：
利用Js或Css滤镜实现IE6中PNG图片半透明效果 IE6PNG妥妥的_html/css_WEB-ITnose
js实现九宫格图片半透明渐显特效的方法_javascript技巧
CSS opacity - 实现图片半透明效果的代码_经验交流
Atas ialah kandungan terperinci css实现背景图片半透明内容不透明代码分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Bagaimana untuk menyesuaikan imej latar belakang dalam Win11
Jun 30, 2023 pm 08:45 PM
Bagaimana untuk menyesuaikan imej latar belakang dalam Win11? Dalam sistem win11 yang baru dikeluarkan, terdapat banyak fungsi tersuai, tetapi ramai rakan tidak tahu cara menggunakan fungsi ini. Sesetengah rakan berpendapat bahawa imej latar belakang agak monoton dan ingin menyesuaikan imej latar belakang, tetapi tidak tahu bagaimana untuk menyesuaikan imej latar belakang Jika anda tidak tahu bagaimana untuk menentukan imej latar belakang, editor telah menyusun langkah-langkah untuk sesuaikan imej latar belakang dalam Win11 di bawah Jika anda berminat Jika ya, lihat di bawah! Langkah-langkah untuk menyesuaikan imej latar belakang dalam Win11: 1. Klik butang menang pada desktop dan klik Tetapan dalam menu pop timbul, seperti yang ditunjukkan dalam rajah. 2. Masukkan menu tetapan dan klik Pemperibadian, seperti yang ditunjukkan dalam rajah. 3. Masukkan Pemperibadian dan klik pada Latar Belakang, seperti yang ditunjukkan dalam gambar. 4. Masukkan tetapan latar belakang dan klik untuk menyemak imbas gambar
Bagaimana untuk memadam imej latar belakang dalam tetapan pemperibadian win10
Dec 21, 2023 pm 02:31 PM
Setiap kali latar belakang desktop yang digunakan dalam sistem Win10 akan dipaparkan dalam imej latar belakang yang diperibadikan dalam tetapan, sesetengah pengguna ingin memadamkannya, tetapi tidak tahu bagaimana untuk melakukannya Artikel ini adalah mengenai cara memadam imej latar belakang yang diperibadikan Win10 dikongsi oleh laman web ini. Lihat imej latar belakang desktop terpakai: 1. Klik [klik kanan] pada ruang kosong pada desktop, dan pilih [Peribadikan] dalam item menu yang terbuka 2. Dalam imej pilihan di latar belakang, anda boleh melihat latar belakang desktop anda telah menggunakan Gambar; padam gambar latar belakang desktop yang digunakan: Nota: Operasi ini melibatkan pengubahsuaian pendaftaran adalah berisiko. Sila sandarkan data terlebih dahulu 1. Tekan kombinasi kekunci [Win+R]. untuk membuka tetingkap jalankan dan masukkan perintah [regedit] ], dan kemudian klik [OK];
Cara menambah imej latar belakang pada Douyin Live Companion - Cara menambah imej latar belakang pada Douyin Live Companion
Mar 05, 2024 am 09:16 AM
Ramai pengguna yang disiarkan secara langsung di Douyin akan menggunakan perisian Douyin Live Companion, tetapi adakah anda tahu cara menambah imej latar belakang pada Douyin Live Companion Berikut ialah kaedah menambah imej latar belakang pada Douyin Live Companion yang dibawakan oleh anda? editor. Jika anda berminat Pengguna datang dan lihat di bawah. Mula-mula log masuk ke Douyin Live Companion pada komputer anda, dan kemudian masukkan halaman utama. Di sebelah kiri, kami memilih [Tambah Bahan] di bawah [Adegan 1]. Seterusnya, akan ada tetingkap untuk menambah bahan pada halaman Kita boleh terus memilih fungsi [Gambar] dan klik untuk masuk. Kami kemudian akan membuka tetingkap di mana bahan imej disimpan secara setempat. Kita perlu memilih bahan gambar yang ingin kita tambah dan kemudian klik butang Buka di sudut kanan bawah untuk menambahnya. Selepas menambah gambar, kita perlu menggunakan butang kiri tetikus untuk menyeret gambar ke yang sesuai
Bagaimana untuk menggantikan imej latar belakang ppt secara seragam
Mar 25, 2024 pm 04:16 PM
Penggantian bersatu imej latar belakang PPT adalah operasi penting untuk meningkatkan gaya visual persembahan, dan boleh dicapai melalui dua kaedah utama: penggantian induk slaid dan penggantian kelompok. Penggantian induk slaid melibatkan pemadaman imej asal dan memasukkan imej baharu dalam induk, dengan itu digunakan pada semua slaid. Fungsi penggantian kelompok secara langsung menggantikan imej latar belakang semua slaid dalam pembentangan. Imej latar belakang yang disatukan bukan sahaja meningkatkan persembahan anda tetapi juga meningkatkan tumpuan khalayak anda. Adalah penting untuk memilih imej berkualiti tinggi yang sepadan dengan tema, dan memberi perhatian kepada melaraskan butiran seperti ketelusan dan saiz. Selain itu, PPT juga menyediakan pilihan tetapan latar belakang yang kaya, seperti kecerunan, tekstur dan corak, yang boleh disesuaikan mengikut keperluan.
Pengenalan kepada menetapkan imej latar belakang dalam WPS Office 2016
Mar 29, 2024 pm 10:21 PM
1. Mulakan demonstrasi WPS, seperti yang ditunjukkan dalam rajah. 2. Klik butang [+] untuk mencipta slaid baharu, seperti yang ditunjukkan dalam rajah. 3. Klik kanan dan pilih [Latar Belakang], seperti yang ditunjukkan dalam rajah. 4. Dalam pilihan isian pada halaman [Object Properties], pilih [Picture or Texture Fill], seperti yang ditunjukkan dalam rajah. 5. Dalam sumber imej, klik Fail Setempat[, seperti yang ditunjukkan dalam rajah. 6. Dalam kotak dialog, pilih gambar yang anda ingin masukkan, dan klik ] untuk membuka butang [, seperti yang ditunjukkan dalam contoh. 7. Ini melengkapkan tetapan imej latar belakang untuk demonstrasi WPS. Kesannya adalah seperti yang ditunjukkan dalam gambar.
Bagaimana untuk menetapkan gambar latar belakang ppt
Mar 25, 2024 pm 04:12 PM
Menetapkan imej latar belakang PPT boleh menambah kesan visual dan menarik pada pembentangan anda. Tutorial ini memperincikan cara memilih imej yang betul, menyediakan imej latar belakang dan melaraskannya supaya sepadan dengan kandungan pembentangan anda. Dengan mengikuti panduan ini, anda boleh mencipta imej latar belakang yang mengagumkan untuk PPT dengan mudah dan meningkatkan kesan keseluruhan pembentangan anda.
Bagaimana untuk menukar imej latar belakang dalam Chi Chi Down? Bagaimana untuk menukar imej latar belakang dalam Chi Chi Down
Mar 04, 2024 pm 03:30 PM
Agaknya semua pengguna di sini sudah biasa dengan perisian Chirp Down, tetapi adakah anda tahu cara menukar imej latar belakang Chirp Down Artikel yang dibawakan kepada anda dalam bab ini ialah cara menukar imej latar belakang Chirp Down , sila baca artikel berikut Sila lihat. Klik ikon "Chirp Down" pada desktop komputer untuk membuka perisian. Masukkan antara muka utama Chi Chi Down dan klik Tetapan. Dalam tetapan, tarik bar kemajuan sepenuhnya ke bawah. (Seperti yang ditunjukkan di bawah) Di bawah Fungsi Lanjutan, klik Sesuaikan Imej Latar Belakang. Cari imej latar belakang yang anda suka dalam fail komputer dan klik untuk membukanya.
ppt背景图片怎么设置全部应用
Jan 07, 2021 pm 04:58 PM
设置方法：1、打开制作好的需要编辑的PPT文件；2、点击“对象属性”按钮，打开“对象属性”菜单，将“填充”设置为“图片或纹理填充”，之后点击“请选择图片”，选择“本地上传”；3、选择背景图片，点击“打开”按钮；4、点击“全部应用”按钮即可。
