透明でない背景に透明なテキストを作成する方法

-1

「本文」に割り当てられた背景と、その内部にテキストを含む白い「div」があるとします。そして、このテキストは、それを通して私たちが背景を見ることができるようになっています。 CSSでそれを実装するには？このように：透明でない背景に透明なテキストを作成する方法

出典

2016-09-23 Евгений Беляев

適用するSVGを使用することができますか？ –

いくつかのコードや例を表示してください。 – aavrug

私はこれが[http://stackoverflow.com/questions/10835500/how-to-change-text-transparency-in-html-css](http://stackoverflow.com/questions/10835500/）の複製であると思います。どのようにテキストを透明に変更するのか） – Corporalis

あなたはこれを作成して、私たちはあなたの試みを持たなければならないmask

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    background: url('http://blog.oxforddictionaries.com/wp-content/uploads/mountain-names.jpg'); 
 
    background-size: cover; 
 
    height: 100vh; 
 
    background-position: center; 
 
    font-family: 'Open Sans', sans-serif; 
 
} 
 

 
svg { 
 
    width: 300px; 
 
    height: 100px; 
 
} 
 
svg text { 
 
    text-anchor: middle; 
 
} 
 
svg #overlay { 
 
    fill: white; 
 
    opacity: 0.7; 
 
} 
 
svg #text { 
 
    font-size: 40px; 
 
    font-weight: bold; 
 
} 
 

 
svg #r { 
 
    fill: white; 
 
    mask: url(#mask); 
 
}

<svg> 
 
    <defs> 
 
    <mask id="mask" x="0" y="0" width="100%" height="100%"> 
 
     <rect id="overlay" x="0" y="0" width="100%" height="100%" /> 
 
     <text id="text" x="50%" y="0" dy="65px">LOREM ISPUM</text> 
 
    </mask> 
 
    </defs> 
 
    <rect id="r" x="0" y="0" width="100%" height="100%" /> 
 
</svg>

出典

2016-09-23 10:15:42

不透明度を使用します。

HTML：

<body> 
    <div class='frontimage'> 

    </div> 
</body>

CSS：

あなたが不透明に使用できるCSSで

body{ 
    background-image: url("yourimage.jpg"); 
} 
.frontimage{ 
    background-image: url("yourotherimage.jpg"); 
    opacity: 0.5; 
}

出典

2016-09-23 09:56:42 Roy123

：0.6; （0 =完全透過 - 1 =完全可視）。フォトショップで

*{font-family:Helvetica, Arial, Sans-Serif;} 
 
.background{background:url(http://www.paisajesbonitos.org/wp-content/uploads/2015/11/paisajes-bonitos-de-oto%C3%B1o-lago.jpg);} 
 
.text{font-size: 5em; font-weight:bold; opacity:0.6;}

<div class="background"> 
 
<span class="text"> 
 
    Lorem ipsum 
 
</span> 
 
</div>

あなたはテキストレイヤーのリフィルバーを下げるか、この層の透明性を高めることができます。

出典

2016-09-23 10:05:00 JoelBonetR

透明でない背景に透明なテキストを作成する方法

答えて

関連する問題