html - CSSでデザインを再現

Question

テキストが可変で、毎回の長さが分からない場合、CSS でこのテキスト効果を再現するにはどうすればよいですか? （CMSから来ています）

また、テキストではなく、背景にわずかな不透明度を持たせたいと考えています。

テキストのスクリーンショット

score 3 · Accepted Answer

パディング付きの 2 つの div。背景は rgba を使用するため、不透明度を制御できます。例えば：

div { padding: 10px; background: rgba(255,255,255,.5) }

score 2 · Accepted Answer

透明な背景の場合:

<element>{
    background-color: rgba(255,102,0,.75);
}

最後の値aは不透明度です。Internet-Explorer で機能させるには、フィルターを使用します。

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BFFF6600,endColorstr=#BFFF6600);
zoom: 1;

最初の 2 桁の 16 進数は不透明度 ( 0 = 00, 100% = FF) で、最後の 6 桁は 16 進数の色です。

段落を含まれるテキストと正確に同じ長さにするには、次を使用します。

p{
   display:inline-block;
   padding: <at will>;
}

score 0 · Accepted Answer

インラインまたはインラインブロック要素に半透明の背景と少しのパディングを与えます。半透明はRGBAカラーで最も簡単です。（ブラウザの互換性については、 http：//caniuse.com/#search=rgbaを参照してください）。

例：

.text
{
    display: inline;
    background-color: rgba(255, 100, 0, 0.8);
    padding: 10px;
    color: #fff;
    font-weight: bold;
}

3 に答える 3