Styling Bilder mit dem gleichen aus Photoshop

Question

Ich entschuldige mich für den Titel Ich bin mir nicht sicher, wie zu erklären, was ich in einem Satz zu tun versuche. Ich arbeite an einer Wordpress-Seite, und ich brauche ein paar Bilder wie das Hintergrundbild in der „Plastische Chirurgie“ dieser Seite https://rinklefreeps.wpengine.com/

Ich gehe durch und bearbeiten sie könnte alle mit Photoshop aussehen zu lassen, aber ich Fühle mich, als ob es eine Möglichkeit gäbe, dies zu programmieren, es wäre viel besser, denn wenn ich dann irgendwas von ihnen ändern müsste, dann muss ich das Bild einfügen und es wird schon richtig aussehen. Ich muss auch in der Lage sein, alt-Tags auf ihnen zu setzen.

Also ich denke, was ich sage ist, ich muss die "Plastische Chirurgie" Abschnitt mit einem Hintergrundbild neu erstellen, dass ich ein Alt-Tag setzen kann. Ich bin jsut nicht ganz sicher, wo man mit dieser Hilfe anfangen würde, wäre großartig. Danke Leute!

Answer 1

Wenn Sie die img in einem Elemente wickeln, können Sie die ::before/::after Pseudo-Klassen verwenden, um eine halbopake Overlay zu machen mit rgba() und einer schrägen, festen Auflage mit der Positionierung mit einem background-color und transform: rotate() die Neigung zu erstellen.

* {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>