0

我试图弄清楚如何将这种效果应用于管理员添加到帖子中的所有图像。尝试过 CSS3、伪类、Jquery > 添加类，但似乎都没有给我合适的结果，可以适应图像大小。我知道我在其他网站上看到过这个，只是不知道该怎么做。

当管理员添加一张或多张图片发布时，我只想将此效果应用于每张图片（见截图）

在此处输入图像描述

[编辑]

当前的 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;
}

目前它是我能得到的最好的，但它仍然不是完美的，我只尝试了两个不同尺寸的图像。

4

1 回答 1

1

通过删除 .img-overlay 选择器中的大多数样式并使用 psuedo 类和 .img-overlay 上的内联块来修复它

谢谢

于 2013-03-09T18:07:46.313 回答