CSS makes the background transparent and the text opaque (compatible with all browsers)-CSS Tutorial-php.cn

CSS makes the background transparent and the text opaque (compatible with all browsers)

巴扎黑

Release： 2017-04-05 16:27:51

Original

1683 people have browsed it

In newer browsers such as FF/Chrome, you can use the rgba of the css attribute background-color to easily achieve background transparency while the text remains opaque. IE6/7/8 browsers do not support rgba, and can only be achieved by using IE's exclusive filter filter:Alpha. However, this way of writing will also make the text transparent, so it can only be used within the child nodes of the transparent container (except text nodes). Set position:relative to avoid inheriting the transparency filter of its parent element. The code is as follows:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web开发者网络 - www.admin10000.comtitle>
<style type="text/css">
.warp{ background:#eee url(back.jpg) no-repeat left top; width:440px; height:400px; border:1px solid #ccc;}
.content { width:180px; height:260px; margin:0px auto; padding:30px 30px; background:rgba(255, 255, 255, 0.6)!important;
filter:Alpha(opacity=60); background: #fff; /* Use IE exclusive filter to achieve IE background transparency*/ }
.content p{ position:relative;} /*Realize IE text opacity*/
style>
head>
<body>
<p class="warp">
<p class="content"><p >Admin10000.com is a must-have website for WEB developers to learn and communicate. Admin10000.com is a must-have website for WEB developers to learn and communicate. Admin10000.com is a must-have website for WEB developers to learn and communicate. Admin10000.com is a must-have website for WEB developers to learn and communicate. Admin10000.com is a must-have website for WEB developers to learn and communicate. Admin10000.com is a must-have website for WEB developers to learn and communicate. p>p>
p>
body >
html>

The above code has been tested and passed in IE6.0+/FF3.0+/Opera10+/Chrome/Safari

The above is the detailed content of CSS makes the background transparent and the text opaque (compatible with all browsers). For more information, please follow other related articles on the PHP Chinese website!