0

私は CSS 疑似要素:beforeで立ち往生しており:after、ボタンの背景をスタイル化しようとしていたときです。問題は次のとおりです。正の z インデックスのみを使用してspan、それ自体とその疑似要素を正しい順序で配置:beforeし:after、常に要素をオーバーラップさせている場合です。負の z インデックスを使用している場合は問題ありませんが、ボタンを機能させるためだけに他の基になる要素の z インデックスを変更したくありません。

それが問題であり、負の z インデックスを除いて達成すべき目標です。

問題コード:

.button {
    display: inline-block;
    z-index:3;
    position: relative;
    left: 25px;
    top: 25px;
    height: 60px;
    padding-left: 20px;
    padding-right: 20px;
    background: rgb(96,96,100);
    border: 1px solid #202020;
    color: #dddddd;
}

.button:before {
    content: "";
    width: 100%;
    height: 100%;
    z-index: 2;
    position: absolute;
    background: rgba(85,85,90, .7);
    padding: 10px;
    left: -10px;
    top: -10px;
}

.button:after {
    content: "";
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
    background: rgba(85,85,90, .4);
    padding: 20px;
    left: -20px;
    top: -20px;
}
4

3 に答える 3

1

国境に行く！:)

http://jsfiddle.net/RwGV9/1/

基本的

border:solid 10px rgba(85,85,90, .7);
left: -10px;
top: -10px;

右、左、上、およびパディングを使用した他のものについても同じことが言えます。

于 2013-03-21T13:42:07.963 に答える
0

HTMLに属性を入れてもかまわない場合は、次のようにすることができます。

http://jsfiddle.net/RwGV9/

HTMLで：

<span data-text='button !' class="button">button</span>

そしてCSSで：

.button:before {
content: attr(data-text);

基本的に、コンテンツを使用するボタンを使用して、テキストを最上位レイヤーに配置します。attr（）; そして、テキストを最も深い部分で非表示にします（bg color = type colorはあまりエレガントではありませんが、ボタンのテキストをユーザーが選択できるようにします！）

于 2013-03-21T13:33:05.423 に答える
0

http://jsfiddle.net/D8gDK/

.button {
display: inline-block;
position: relative;
left: 25px;
top: 25px;
width: 100px;
    height: 60px;
padding-left: 20px;
padding-right: 20px;
background: rgb(96,96,100);
border: 1px solid #202020;
color: #dddddd;
}
.button:before {
content: "";
display: block;
width: 140px;
height: 60px;
position: relative;
background: rgba(85,85,90, .7);
border: 10px solid rgba(85,85,90, .4);
padding: 10px;
left: -40px;
top: -20px;
}

2 番目の疑似要素を取り除き、ボタンの後ろに before を配置しました。色の加工が必要かも…

ただし、ボタンの幅がわかっている場合にのみ機能します

于 2013-03-21T13:30:43.943 に答える