如何使用伪元素添加响应式图像答案

【问题标题】：How to add a responsive image using pseudo-elements如何使用伪元素添加响应式图像
【发布时间】：2012-05-12 14:25:34
【问题描述】：

我尝试使用图像和 css 伪元素添加框阴影和渐变边框。

我试过那个代码：

.box:before {
    content: url('box-shadow.png');
    position: absolute;
    width: auto;
    height: auto;
    max-width: 100%;
    z-index: -1;
    bottom: -9px;
    line-height: 0;
}
.box:after {
    content: url('box-border.png');
    position: absolute;
    width: auto;
    height: auto;
    max-width: 100%;
    bottom: -5px;
    right: 0px;
}

但是当父 div 调整大小时，添加的图像不会调整大小，而它是通过手动添加图像来工作的。

看那个小提琴http://jsfiddle.net/5TG3E/2/

【问题讨论】：

标签： css image responsive-design pseudo-element

【解决方案1】：

我从我身边尝试可能对你有帮助。像这样写：

.box:after {
    content:'';
    position: absolute;
    z-index: -1;
    bottom: -9px;
    margin: 0 auto;
    top:0;
    left:0;
    right:0;
    background:url('http://dl.dropbox.com/u/4812171/box-shadow.png') no-repeat bottom center;
    -moz-background-size:100% 9px;
    background-size:100% 9px;
}
.box:before {
    content:'';
    position: absolute;
    bottom: 0px;
    right: 0px;
    left:0;
    top:0;
    background:url('http://dl.dropbox.com/u/4812171/box-border.png') no-repeat bottom right;
}

查看http://jsfiddle.net/5TG3E/6/

【讨论】：