html - 图标作为右上角的背景

Question

我正在处理属于错误消息一部分的图像。除了一个小细节，我已经设法创造了一切。右上角的图标是错误消息背景的一部分。我以前从未做过这样的事情，我正在使用响应式设计。

我已经用目前的代码创建了一个 fiddle ，稍后我将添加 JavaScript 以在按下 X 时关闭消息框:

JSFiddle:https://jsfiddle.net/kLw6a8zr/

我正在工作的图片:

Answer 1

用以下代码替换.net-content类

.n-content {
    width:100%;
    min-height:120px;
    background-color:#d45659;
    box-shadow:0 0 15px 1px rgba(0, 0, 0, 0.4);
    box-sizing:border-box;
    overflow:hidden;
    background-image: url(http://i1167.photobucket.com/albums/q627/deskdecode/alert-min_zpsz7khasfs.png);
    background-position: 95% -50%;
    background-repeat: no-repeat;
    background-size: 160px;
 }

updated fiddle