이 글은 주로 순수 CSS를 사용하여 배경 이미지를 반투명하고 불투명하게 만드는 방법을 소개합니다. 편집자는 이것이 꽤 좋다고 생각합니다. 이제 여러분에게 공유하고 참고할 수 있기를 바랍니다.
최근에 로그인 인터페이스를 만들었는데 갑자기 배경 이미지가 투명하고 내용이 불투명한 이 효과를 사용하고 싶었습니다. 여기서는 두 가지 아이디어에 대해 이야기하겠습니다.
효과 표시
반투명
불투명
일반적인 실패 사례
가장 일반적인 방법은 요소의 불투명도를 설정하는 것입니다. 그리고 배경은 반투명하여 시각적 효과에 심각한 영향을 미칩니다.
또 다른 옵션은 background-color:rgba()를 설정하는 것입니다. 이 방법은 배경색의 투명도만 설정할 수 있습니다.
올바른 자세
두 가지 방법을 생각했습니다. 첫 번째는 의사 요소에 배경을 추가하고 의사 요소의 배경 투명도를 설정하는 것입니다
.<!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 class="bg"> <p class="content"> 一些内容 </p> </p>
이 역시 동일한 효과를 얻을 수 있습니다.
관련 권장 사항:
Js 또는 CSS 필터를 사용하여 IE6에서 PNG 이미지의 반투명 효과를 얻습니다. IE6PNGproper_html/css_WEB-ITnose
js 방법을 사용하여 9제곱 그리드 이미지_javascript 기술의 반투명 그라데이션 효과를 얻습니다.
CSS 불투명도 - 이미지 반투명 효과를 얻기 위한 코드_경험 교환
위 내용은 반투명 배경 이미지와 불투명 콘텐츠를 구현하는 CSS 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!