フォトショップで同じように見えるようにイメージを整える

Question

タイトルを謝罪します。私が1つの文章で何をしようとしているかを説明する方法がわかりません。私はWordPressサイトで作業しています。このページの「Plastic Surgery」セクションの背景画像のように見えるようにする必要があります。https://rinklefreeps.wpengine.com/

Photoshopですべてを編集できますこれをコード化する方法があるように感じる方がずっと良いでしょう。なぜなら、もしそれらのうちのどれかを変更する必要があれば、私がする必要があるのはイメージを置くだけです。私はまたそれらにaltタグを置くことができる必要があります。

私は何を言っているのでしょうか？私はaltタグを置くことができる背景画像で "Plastic Surgery"セクションを再作成する必要があると思います。私は、この助けをどこから始めるのがいいか分かりません。みんなありがとう！

Answer 1

あなたが要素にimgをラップする場合は、rgba()を使用して半透明のオーバーレイを作るために::before/::after疑似クラスを使用することができますし、斜面を作成するためにbackground-colorとtransform: rotate()とポジショニングを使用して、傾斜、固体オーバーレイ。

* {margin:0;padding:0;box-sizing:border-box;} 
 
.imgContainer { 
 
    width: 50%; 
 
    margin: auto; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.imgContainer::after, .imgContainer::before { 
 
    content: ''; 
 
    position: absolute; 
 
} 
 

 
.imgContainer::after { 
 
    top: 0; left: 0; bottom: 0; right: 0; 
 
    background: rgba(255,255,255,0.5); 
 
} 
 

 
.imgContainer::before { 
 
    height: 200%; 
 
    width: 50%; 
 
    background: #fff; 
 
    left: 0; 
 
    transform: translate(-40%,-50%) rotate(15deg); 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
} 
 

 
.text { 
 
    position: absolute; 
 
    top: 50%; left: 50%; 
 
    width: 80%; height: 80%; 
 
    transform: translate(-50%,-50%); 
 
    background: rgba(255,255,255,.3); 
 
    z-index: 1; 
 
    padding: .5em; 
 
}

<div class="imgContainer"> 
 
    <img src="http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg" alt="alt"> 
 
    <div class="text"> 
 
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
 
    </div> 
 
</div>