1.使用伪类给元素添加半透明背景
正常情况下我们不能直接给元素设置半透明属性,因为这样会导致该元素下所有元素都变的半透明了。还有一种方法就是使用半透明的图片做为背景,但是这种方式对修改样式不利。实现代码
:before {
box-shadow: @box_shadow;
background-color: whitesmoke;
display: block;
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
opacity: 0.618;
z-index: 1;
}
此样式占屏幕宽度100%,对某些元素不需要100%宽度的则是用以下代码
:before {
background-color: lightcyan;
.top_radius(0.5em);
box-shadow: @box_shadow;
bottom: 0;
content: "";
margin-right: -100%;
opacity: 0.618;
width: 100%;
z-index: 99999;
}
不用伪类使用rgba更简单。
2.当元素为绝对定位时,要让它居中显示,这里有很多种实现方式,一种就是在外层套一样宽度100%的元素,然后调节css样式,但是这种方式因为添加了个外围元素,而且宽度100%,这个如果只是展示倒是没什么问题,但是当这个外围元素的下层还有元素并且需要可点击时,这种方式就会导致下层元素被挡而无法点击了。我的实现方式就是使用如下样式
left: 50%;
right: 50%;
简单优美。