css妙用

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%;

简单优美。

你可能感兴趣的:(css妙用)