Css实现背景色透明、文字不透明
CSS3背景、边框、字体和文本
轮廓
轮廓
绘制在HTML元素边框边缘外围
CSS轮廓属性 outline：总体声明所有边框属性
outline值顺序及单个属性 outline-color：设置边框颜色 outline-style：设置边框线样式 outline-width：设置边框线宽度
背景
CSS背景属性 background：总体声明所有背景属性
边框图片
CSS边框图片 Border-image：设置边框填充图片 Border-image-source ：设置图片路径 Border-image-slice ：设置边框向内偏移 Border-image-width ：设置边框宽度 Border-image-outset ：设置图片超出边框的量 Border-image-repeat ：设置图片平铺、铺满、拉伸
• 2、给网页增加背景图片，并让图片放在 顶部居中，不要重复？
• 3、给网页的一个div添加边框，并设置漂 亮的边框效果？
计算机与信息工程系
字体
CSS字体属性 font：总体声明所有字体属性
font值顺序及单个属性 font-style：设置字体样式 font-variant：设置是否小型大写显示文本 font-weight：设置字体粗细 font-size：设置文字大小 font-family：设置字体
字体
@font-face添加自己的字体 默认字体必须在客户机器上存在，有了@font-face就可以使用任何字体了
文本属性
值 color direction Letter-spacing Line-height Text-align Text-decoration Text-indent Text-shadow Text-transform White-space Word-spacing
CSS实现文字浮雕效果,文字阴影效果
关键字：浮雕效果阴影效果利用CSS text-shadow 属性实现CSS实现文字浮雕效果，文字阴影效果支持 text-shadow 的浏览器有 Firefox 3.5, Chrome 2.0, Opera 9.5, Safari 4.0。
利用CSS text-shadow 属性支持 text-shadow 的浏览器有 Firefox 3.5, Chrome 2.0, Opera 9.5, Safari 4.0, 其中 Safari 是老早就可以的，但直到 4.0 才支持多重阴影。
另外 Opera mini 也能显示，但比较弱，阴影不能模糊。
浮雕文字浮雕文字效果在 Mac OS X 和 iPhone 中随处可见，由于阴影半径很小，一般是 0 或 1px, 所以也适合小号的文本。
在使用上一般遵循这个原则：深色文字浅色背景，用白阴影，浅色文字深色背景，用黑阴影。
text-shadow: 0 1px 0 #eee; 凹进效果text-shadow: 0 -1px 0 #123; 凹进效果text-shadow: 0 -1px 1px #eee; 凸出效果text-shadow: 0 1px 1px #123; 凸出效果 - http://fis.io/阴影文字和发光文字一个最简单的阴影文字是如下这样写的，其中 1px 2px 代表阴影相对于文字向右下方向偏移了 1px 2px, 可以为负值；5px 代表阴影的模糊半径，取值越大，阴影越扩散看不见。
最后是阴影颜色。
这样的阴影适合字号比较大的文字。
text-shadow: 1px 2px 5px #888;text-shadow: 0 0 10px #fd8;多重阴影在上面所列的新版浏览器中都已经支持多重阴影，可以达到一些特殊的效果，不过注意，如果文字和背景颜色接近，IE 下就杯具了。
text-shadow: 0 -1px 0 #000, 1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000;text-shadow: 1px 1px 5px #08c, 1px 1px 0 #68a;text-shadow: -2px 0 1px #db6, 2px 0 1px #6bd;text-shadow: -1px -1px 0 #ccc, -1px -1px 3px #ccc, 1px 1px 0 #444, 1px 1px 3px #444; text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;半透明阴影颜色有时候需要做的阴影不想它模糊半径太大，又不能太黑，于是从黑色改为灰色──问题来了，灰色的阴影在深色背景上很难看。
css 背景色透明文字不透明
css 背景色透明文字不透明在FF/Chrome 等较新的浏览器中可以使用css属性background-color的rgba轻松实现背景透明，而文字保持不透明。
而IE6/7/8浏览器不支持rgba，只有使用IE的专属滤镜filter:Alpha 来实现，但是这样写法会把文字也变为透明，因此只有在透明容器的子节点（文本节点除外）内设置position:relative才能不继承其父元素的透明滤镜，代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Web开发者网络- </title><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; /*使用IE专属滤镜实现IE背景透明*/ }.content p{ position:relative;} /*实现IE文字不透明*/</style></head><body><div class="warp"><div class="content"><p> 是WEB开发者学习交流必备网站。
css文字渐变色_css文字颜色渐变的3种实现
css⽂字渐变⾊_css⽂字颜⾊渐变的3种实现在web前端开发过程中，UI设计师经常会设计⼀些带渐变⽂字的设计图，在以前我们只能⽤png的图⽚来代替⽂字，今天可以实现使⽤纯css 实现渐变⽂字了。
下⾯就介绍3中实现⽅式供⼤家参考！基础样式：.gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; }第⼀种⽅法，使⽤ background-cli、 text-fill-color：.gradient-text-one{background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}说明：background: -webkit-linear-gradient(...) 为⽂本元素提供渐变背景。
webkit-text-fill-color: transparent 使⽤透明颜⾊填充⽂本。
webkit-background-clip: text ⽤⽂本剪辑背景，⽤渐变背景作为颜⾊填充⽂本。
第⼆种⽅法，使⽤ mask-image：.gradient-text-two{color:red;}.gradient-text-two[data-content]::after{content:attr(data-content);display: block;position:absolute;color:yellow;left:0;top:0;z-index:2;-webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));}说明：mask-image 和 background-image ⼀样，不仅可以取值是图⽚路径，也可以是渐变⾊。
html中如何使得改变背景的透明度时，背景上的文字透明度不被改变
html中如何使得改变背景的透明度时，背景上的⽂字透明度不被改变1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"2 "/TR/html4/loose.dtd">3<html>4<head>5<title></title>6<style type="text/css">7 .div1{8 width: 150px;9 height: 150px;10 background-color: #000001;11 text-align: center;12/*透明度*/13 opacity: 0.5;1415 }16 span{17 color: red;18 font-size: 18px;19 padding-top: 60px;20 }21</style>22</head>23<body>24<div class="div1">25<span>不改变⽂字的透明度</span>26</div>27</body>28</html>使⽤opacity改变背景的透明度时，背景上的⽂字的透明度也会发⽣改变。
为了使⽂字的颜⾊不发⽣改变，我们使⽤background-color: rgba(); background-color: rgba(a,b,c,a);三个参数依次为（R G B 透明度）的参数1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"2 "/TR/html4/loose.dtd">3<html>4<head>5<title></title>6<style type="text/css">7 .div1{8 width: 150px;9 height: 150px;10 text-align: center;11 background-color: rgba(0,0,1,0.5);1213 }14 span{15 color: red;16 font-size: 18px;17 padding-top: 60px;18 }19</style>20</head>21<body>22<div class="div1">23<span>不改变⽂字的透明度</span>24</div>25</body>26</html>。
css实现文字透明渐变的方法
css实现文字透明渐变的方法以CSS实现文字透明渐变的方法在网页设计中，文字透明渐变是一种常见的效果，可以使文字在不同的颜色之间过渡，增加页面的视觉吸引力。
本文将介绍如何使用CSS来实现文字透明渐变的效果。
我们需要在HTML文件中添加一个包含文字的元素，例如一个段落(`<p>`)或标题(`<h1>`)。
然后，通过CSS样式来设置文字的透明渐变效果。
以下是实现文字透明渐变的几种方法：方法一：使用`linear-gradient`函数`linear-gradient`函数可以创建一个线性渐变的背景，我们可以将其应用于文字上。
首先，我们需要设置文字为透明，然后通过`linear-gradient`函数来定义渐变的颜色和方向。
```cssp {color: transparent;background: -webkit-linear-gradient(#f00, #00f);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}```在上述代码中，我们将文字的颜色设置为透明(`color: transparent;`)，然后通过`background`属性将文字的背景设置为一个线性渐变(`background: -webkit-linear-gradient(#f00, #00f);`)。
最后，通过`-webkit-background-clip`属性和`-webkit-text-fill-color`属性，将背景裁剪到文字的形状，并填充文字的颜色为透明。
方法二：使用`mask-image`属性`mask-image`属性可以将一个图像应用于元素的蒙版，我们可以将一个渐变图像用作文字的蒙版，从而实现文字透明渐变的效果。
```cssp {-webkit-mask-image: -webkit-linear-gradient(#f00, #00f);mask-image: linear-gradient(#f00, #00f);}```在上述代码中，我们通过`-webkit-mask-image`属性和`mask-image`属性将一个线性渐变图像应用于文字的蒙版，从而实现文字透明渐变的效果。
CSS实现背景透明半透明效果的方法
CSS实现背景透明半透明效果的⽅法全透明代码:{background:transparent}半透明代码:{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%}其他的还有不少⽂章，有个不错，如何⽤CSS实现背景半透明效果？内容详细如下： 龙⾏天下精彩内容等着你引⽤如何⽤CSS实现背景半透明效果？做过活动页⾯的同学可能会遇到要做背景半透明的效果，我们⼀般的做法是⽤两个层，⼀个⽤于放⽂字，另⼀个⽤于做透明背景，因为透明滤镜的效果会影响到⾥⾯的内容。
不过如果你只需求在IE下实现，我们有更简单的做法：HTML代码：<div class="alpha1"><div class="ap2"><p>背景为红⾊(#FF0000)，透明度20%。
</p></div></div>CSS代码：.alpha1{width:300px;height:200px;background-color:#FF0000;filter: Alpha(Opacity=30);}.ap2{position:relative;} 这样基本就可以实现啦，也不⽤担⼼定位和⾃适应问题，最⼤的问题是仅IE⽀持。
如果兼容FF、OP怎么写呢？⾸先，上⾯这种定法是不⾏的啦，那就只能⽤两个层重叠的⽅法啦。
改下页⾯结构与CSS样式：HTML代码：<div class="alpha1"><div class="ap2"><p>背景为红⾊(#FF0000)，透明度20%。
</p></div><!--[if IE]><![if !IE]><![endif]--> <div class="alpha2"></div> <!--[if IE]><![endif]><![endif]--></div>CSS代码：.alpha1,.alpha2{width:100%;height:auto;min-height:250px;/* 必需 */_height:250px;/* 必需 */overflow:hidden;background-color:#FF0000;/* 背景⾊ */}.alpha1{filter:alpha(opacity=20); /* IE 透明度20% */}.alpha2{background-color:#FFFFFF;-moz-opacity:0.8; /* Moz + FF 透明度20%*/opacity: 0.8; /* ⽀持CSS3的浏览器（FF 1.5也⽀持）透明度20%*/ }.ap2{position:absolute;}。
Css如何实现背景色透明或半透明但内容不透明
Css如 何 实 现 背 景 色 透 明 或 半 透 明 但 内 容 不 透 明
1.针对IE浏览器
复制代码 代码如下:
.demo{ background-color:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26FFFFFF, endColorstr=#26FFFFFF) }
2.针对FF，谷歌等浏览器
复制代码 代码如下:
.demo{ background:transparent;<!--背景透明--> color:#fff;<!--字体颜色--> background-color:rgba(255,255,255,0.15)<!--最后一个参数设置透明度，前面三个是RGB颜色值--> }
注意：如果容器是a标签的话，需要给a标签加上“display:block”属性。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Css实现背景色透明、文字不透明
设置元素的透明度：
-moz-opacity:0.8; /*在Firefox中设置元素透明度
filter: alpha(opacity=80); /*ie使用滤镜设置透明
但是当我们对一个标签设置背景的透明度时，往往我们并不希望该标签上的文字图片也变成半透明了。
例如：
<div><p>不透明</p></div>
div{-moz-opacity:0.3;filter:alpha(opacity=30);background:#000;wi dth:500px;
height:500px;color:#F30; font-size:32px; font-weight:bold; }
可以很明显的看出文字也被半透明的，这是我们不想看到的效果。
以前我曾经是绝对定位的方法解决这个问题，也就是现在的p并不是div的子元素。
<div></div>
<p>不透明</p>
这样div的半透明效果也就不会影响到元素p了。
最后在将p定位到需要的位置。
但是很多时候这样的标签并不是很合理，有可能还会多浪费几个标签。
下面的这种方法就可以解决上面的问题了：
div{background:rgba(0,0,0,0.2) none repeat scroll !important; /*实现FF背景透明，文字不透明*/
background:#000; filter:Alpha(opacity=20);/*实现IE背景透明*/ width:500px; height:500px; color:#F30; font-size:32px;
font-weight:bold;}
div p{ position:relative;}/*实现IE文字不透明*/
直接用rgba颜色就可以解决子标签跟着半透明的问题了，但是ie还不是能很好的支持。
所以我们给不想被透明的标签设置一个定位属性，问题接能解决了。