イメージをクラス（CSS）を使用して画像にする

Question

ここで問題になるのは、イメージを簡単に変更できるようにするテーマ（ワードプレス）をクライアントに使用しているためです。生産：私は試してみて、達成するために必要なもの

<div class="row"> 
    <div class="column"> 
     <img class="image" src="image user can change"> 
    </div> 
</div> 

は、テーマが生成するコアHTMLを変更するだけCSSを使用せずに、画像の上にロゴを置くために、画像の上の層です。

私は、クラスの列に背景画像を追加して、何とか前面に持ってきていると思っていました。私は幸運のない列でz-indexを試みました。何か案は？

Answer 1

擬似要素を使用して、後の作業を達成できます。次のコードのようなものを使用してみてください：ここで

.column { 
    position:relative; 
} 
.column:after { 
    content:""; 
    position:absolute; 
    z-index:2; 
    background:url(your-image.jpg); 
} 
.column img { 
    position:relative; 
    z-index:1; 
} 

は、例えば、フィドルです： https://jsfiddle.net/scooterlord/cqhf2gw4/

Answer 2

私はあなたが列クラスで:afterセレクタを利用することができると思います。このようなもの：

.column { 
    position: relative; 
} 

.column:after { 
    content: ""; 
    position: absolute; 
    width: 30px; 
    height: 30px; 
    bottom: 10px; 
    right: 10px; 
    background-image: url('path/to/logo.png'); 
} 

右下に小さなロゴが表示されます。

Answer 3

与え、imgロゴのパスを追加し、親position:absolute;

.image { 
 
height: 200px; 
 
max-width: 100%; 
 
} 
 

 
.overlay{ 
 
position:absolute; 
 
/*positioning here*/ 
 
} 
 

 
.overlay img{ 
 
height: 30px; 
 
}

<div class="row"> 
 
    <div class="column"> 
 
    <div class="overlay"><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a"></div> 
 
     <img class="image" src="https://d4n5pyzr6ibrc.cloudfront.net/media/27FB7F0C-9885-42A6-9E0C19C35242B5AC/4785B1C2-8734-405D-96DC23A6A32F256B/thul-90efb785-97af-5e51-94cf-503fc81b6940.jpg?response-content-disposition=inline"> 
 
    </div> 
 
</div>

を新しいクラス .overlayを追加