WordPress的 - 當管理員通過帖子編輯器添加圖像時如何實現這種效果

我試圖弄清楚如何將這種效果應用到管理員添加到帖子的所有圖像上。試過CSS3，僞類，Jquery>添加類，沒有人似乎給我體面的結果，將適應圖像大小..我知道我在其他網站上看到這一點，只是不知道該怎麼做。WordPress的 - 當管理員通過帖子編輯器添加圖像時如何實現這種效果

當管理員將一個或多個圖像後我只是想有應用於每個圖像這樣的效果（見截圖）

enter image description here

[編輯]

當前CSS：

.overlay-top { 
    background:url('images/top-right.png') no-repeat scroll top right transparent; 
    height:85px; 
    position:relative; 
    top:55px; 
    left:13%; 
} 

.overlay-bottom { 
    background:url('images/bottom-left.png') no-repeat scroll top left transparent; 
    height:85px; 
    position:relative; 
    bottom:70px; 
    right:13%; 
} 

.img-overlay { 
    width:auto !important; 
}

當前JQuery：

$("#main a").has("img").addClass("img-overlay"); 
$("section.post_content a img").addClass("overlay-img"); 
$(".overlay-img").after("<div class='overlay-bottom'></div>"); 
$(".overlay-img").before("<div class='overlay-top'></div>");

之前，這是一個僞類：

.img-overlay { 
    display: block; 
    height: 100%; 
    width:90%; 
    margin: 25px auto; 
    position: relative; 
} 

.img-overlay:before { 
    content: url('images/top-right.png'); 
    position: absolute; 
    right: -33px; 
    top: -19px; 
} 

.img-overlay:after { 
    content: url('images/bottom-left.png'); 
    position: absolute; 
    left: -31px; 
    bottom: -23px; 
}

它是如何目前我已經能夠得到它最好的，但它仍然心不是完美的，我只用兩種不同大小的圖像嘗試。

來源

2013-03-09 Derek

你有什麼代碼嘗試過的inline-block的

由於固定呢？或者你想讓我們免費使用'ImageMagick'或'GD'編程嗎？ – JakeGould 2013-03-09 16:49:22

最近我嘗試使用JQuery插入一個類到周圍的錨標記，然後一個div前後圖像與類來獲取圖像..在此之前，它是一個僞內容的類：（我的形象），但與兩個我遇到了麻煩，因爲錨點與圖片大小不匹配，所以角落離開圖片。請在這裏查看大圖片：itestwebpageshere.biz/gallery並在此處顯示較小的圖片：itestwebpageshere.biz/accommodations ..並且沒有我不指望你從頭開始糾正我已經做的事情，我會更新上面的內容來展示我試過的東西 – Derek 2013-03-09 17:17:07

你有沒有試過「網站督察」，看看你提到的其他網站是如何做的？ – Ares 2013-03-09 17:26:53

在.IMG疊加選擇去除大部分的造型和使用僞類和.IMG的覆蓋

來源

2013-03-09 18:07:46 Derek

WordPress的 - 當管理員通過帖子編輯器添加圖像時如何實現這種效果

回答

相關問題