V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
boyhailong
V2EX  ›  CSS

深夜问题个 css 样式重用问题

  •  
  •   boyhailong · Jan 9, 2016 · 3515 views
    This topic created in 3761 days ago, the information mentioned may be changed or developed.

    比如我想定制一个 button 用的时候只是透明度 背景不一样 怎么写才最好,现在最笨的办法是:
    .button-allen {
    background:url('{% static 'img/apple-touch-icon-114.png' %}') center;
    opacity: 0.5;
    width:35px;
    height: 35px;
    border-radius:80%;
    background-size: cover;
    zoom: 1;
    }
    .button-allen:hover {
    background:url('{% static 'img/apple-touch-icon-114.png' %}') center;
    opacity: 1;
    width:35px;
    height: 35px;
    border-radius:80%;
    background-size: cover;
    zoom: 1;
    }

    一个 button 就这么多代码,用多个还不写死, google 了半天语法 无奈不知道搜索什么,估计是关键词不对,貌似还有哥 sass 的,求助 😳

    5 replies    2016-01-09 13:16:31 +08:00
    wulongqiu
        1
    wulongqiu  
       Jan 9, 2016
    .button-allen, .button-allen:hover {
    background:url('{% static 'img/apple-touch-icon-114.png' %}') center;
    opacity: 0.5;
    width:35px;
    height: 35px;
    border-radius:80%;
    background-size: cover;
    zoom: 1;
    }
    .button-allen:hover {
    opacity: 1;
    }
    最简单的是这样, CSS 是后边覆盖前边的。
    可以搜索: CSS 重用
    mogita
        2
    mogita  
       Jan 9, 2016
    @wulongqiu 是不是第一行的 .button-allen:hover 也可以去掉?
    hxsf
        3
    hxsf  
       Jan 9, 2016
    难道不是这么写的咩。。。

    ```css
    .button-allen {
    background:url('{% static 'img/apple-touch-icon-114.png' %}') center;
    opacity: 0.5;
    width:35px;
    height: 35px;
    border-radius:80%;
    background-size: cover;
    zoom: 1;
    }
    .button-allen:hover {
    opacity: 1;
    }
    ```
    SourceMan
        4
    SourceMan  
       Jan 9, 2016 via iPhone
    呵呵
    boyhailong
        5
    boyhailong  
    OP
       Jan 9, 2016
    @wulongqiu 还是没有解决 因为用了 pure 很蛋疼的 pureutton 麻烦点修改了下 也能看 但麻烦
    还有一个问题 sidebar 的位置有点偏下 不知道怎么调整
    如下图
    <img>src=" "</img>

    看不到的话直接看主页吧 https://allenzhao.herokuapp.com/
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   3306 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 47ms · UTC 13:22 · PVG 21:22 · LAX 06:22 · JFK 09:22
    ♥ Do have faith in what you're doing.