开发工具与关键技术:DW 前端
作者:陈芝番
撰写时间:2019.8.1
实现半透明效果演示,给定三个DIV,第一个设置最大的宽高,第二个是该图片宽高,第三个设置背景色,适当的宽高。还有Class权重,
以下是权重的规则:标签的权重为1,class的权重为10,id的权重为100,以下例子是演示各种定义的权重值: /权重为1/
div{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 div{
}
/*权重为10+1=11*/
.class1 div{
}
/*权重为10+10+1=21*/
.class1 .class2 div{
}
如果权重相同,则最后定义的样式会起作用,但是应该避免这种情况出现。
Html部分:内容(content)
<div class="div-a">
<div class="div-b"></div>
<div class="div-b-content">实现DIV半透明演示</div>
</div>
CSS部分:
Background:设置背景图
Background-size:设置背景图宽高
Relative:相对定位
Absolute:绝对定位
Text-align:文本居中
<style>
.div-a {
background: url(./images/div-a-bg.jpg) no-repeat;
background-size: 230px 136px;
width: 230px;
height: 136px;
padding: 10px;
position: relative;
}
.div-b {
background: #000;
width: 200px;
height: 100px;
filter: alpha(Opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
position: absolute;
top: 10px;
left: 10px;
}
.div-b-content {
width: 200px;
height: 100px;
color: #F00;
position: absolute;
top: 10px;
left: 10px;
text-align: center;
padding-top: 5px;
}
/这里对CSS代码换行是为了让代码在此我要中显示完整,换行后CSS效果不受影响 */ 实现的效果图如下:
结语:DIV半透明效果演示,主要运用了Class权重的规则,.Class1,.Class1 div,.Class1.Class2
div权重大小不一样,如果权重相同,最后定义的样式也会起作用的,但是应该避免这种情况发生。