12

このテキストグラデーションメソッドを使用し、テキストにドロップシャドウを付ける方法はありますか? http://css-tricks.com/snippets/css/gradient-text/

ドロップシャドウを次のように設定すると

text-shadow: 1px 1px 2px #000;

背景が透明に設定されているため、テキストのグラデーションが台無しになります。Webkit ブラウザーのこれに対する解決策を知っている人はいますか。

4

5 に答える 5

12

更新しました

解決策が見つかりました。唯一の問題は、htmlに属性が必要なことです。

http://jsfiddle.net/2GgqR/2/

h1 {
  font-size: 72px;
  background-image: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position:relative;  
}

h1:after {
  background: none;
  content: attr(data-text);
  left: 0;
  top: 0;
  z-index: -1;
  position: absolute;
  text-shadow: 1px 1px 2px #000;
}

オリジナルはこちら:) http://viget.com/inspire/background-clip-text-shadow-gradients

コメントから 更新されたリンクhttp://jsfiddle.net/2GgqR/5/

ここで、背景の背景色を :after に追加しました

h1:after {
  background: #f3f3ee;
}

.background{
    background-color: #f3f3ee;
    position: relative;
    z-index: 1;
}
于 2013-02-25T22:38:35.647 に答える
1

私はこれに本当に反対票を投じているかもしれませんが、それを行う唯一の方法は、複製要素を後ろに配置することだと思います。これは単なるアイデアです。

于 2013-02-25T22:21:02.760 に答える