0

管理者が投稿に追加するすべての画像にこの効果を適用する方法を見つけようとしています。CSS3、Pseudo Class、Jquery > Add Class を試してみましたが、画像サイズに適応する適切な結果が得られないようです。

管理者が投稿する画像を追加するときに、この効果を各画像に適用したいだけです（スクリーンショットを参照）

ここに画像の説明を入力

[編集]

現在の 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;
}

現在の状態は私が入手できた中で最高ですが、まだ完璧ではなく、2つの異なるサイズの画像でしか試していません.

4

1 に答える 1

1

.img-overlay セレクターのほとんどのスタイルを削除し、疑似クラスと .img-overlay のインライン ブロックを使用して修正しました

ありがとう

于 2013-03-09T18:07:46.313 に答える