使用方法：前にsvgと浮動小数点を残して

Question

私は擬似要素を使用することができますか？私はテキストとsvgグラデーションをブロックしていますが、このブロックの左側にフローティングする必要があります。問題は、私がこのブロック全体の前で私のブロックの上にこのsvgの部分を見ることができ、左側に置くと何も見ることができないということです。 HTMLの

例：

<div class="slide__text"> 
       <h2 class="slide__heading">Heding</h2> 
       <p class="slide__perex">Lorem ipsum is simply dumy text</p> 
       <a href="" title="" class="btn slide__btn btn-warning">Lorem Ipsum</a> 
       <a href="" title="" class="slide__cancel"><span class="icon icon-cancel"></span></a> 
      </div> 

と私のSCSSファイルがあります：

.slide__text 
{ 
overflow: auto; 
text-align: left; 
position: absolute; 
display: block; 
background: rgba(red($color-blue), green($color-blue), blue($color-blue), 
0.95); 
padding: 40px 30px 30px 15px; 
height: 230px; 
top: 50%; 
margin-top: -105px; 
width: 220px; 
right: 0; 
&:before 
{ 
    content: url("images/layout/news-background-left.svg"); 
    float: left; 
    position: absolute; 
} 
} 

が、私は左側の上に置くと表示されるようにどのように任意の解決策を見つけるdidntの...

助けを求めるThx

Answer 1

あなたはcontent:'';にSVGを入れることができますが、 background-imageを使用すれば、必要に応じてサイズを変更することができます。

https://jsfiddle.net/3wc2jt7t/

私は右にそれらをフロートすることができますし、SVGを左に浮いているように、私はdiv要素にh2,p and aを包ん。それが役に立てば幸い！