造型圖像看起來相同與出photoshop

Question

我爲標題道歉我不知道如何解釋我想用一句話來做什麼。我正在一個WordPress網站上工作，我需要在這個頁面的「整形外科」部分製作一堆圖像，看起來像背景圖像https://rinklefreeps.wpengine.com/

我可以通過photoshop編輯它們，但我感覺好像是有一種方法來編碼它會更好，因爲如果我需要改變它們中的任何一個，我需要做的就是放入圖像，它已經看起來是正確的。我也需要能夠在他們上面添加ALT標籤。

所以我想我要說的是我需要重新創建「整形外科」部分的背景圖片，我可以把ALT標記。我不太清楚從哪裏開始，任何幫助都會很棒。多謝你們！

Answer 1

如果你在一個元素包裹img，您可以使用::before/::after僞類，可以使用rgba()半透明的覆蓋，並利用具有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>