Html 图标作为右上角的背景

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

我已经创建了一个到目前为止的代码，稍后我将添加JavaScript，以便在按下

X

时关闭消息框：

JSFiddle：

我工作的图片：

---

试试这个片段，我希望它能帮助你改变类n-wrapper

.n-wrapper {
  width:60%;
  padding:20px;
  margin:0px auto;
  top : 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
}

*{填充：0；边距：0；}
身体{
背景色：#423a4a；
}
.n-wrapper{
宽度：60%；
填充：20px；
保证金：0px自动；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
位置：固定；
}
n-内容{
宽度：100%；
最小高度：120px；
背景色：#d45659；
盒影：0.15px 1px rgba（0,0,0,0.4）；
框大小：边框框；
溢出：隐藏；
}
.n-h1{
颜色：#fff；
字体大小：22px；
边框底部：1px实心#c04c4f；
填充：5px25px；
}
.n-p{
颜色：#fff；
字号：18px；
边框顶部：1px实心#ff686c；
填充：30px；
}
.n按钮{
宽度：100%；
背景色：#fff；
文本对齐：右对齐；
填充：20px；
}
.n-按钮-白色{
颜色：#fff；
大纲：无；
背景色：#bfbf；
边框：1px实心#A9A9；
边界半径：4px；
宽度：20%；
最小宽度：120px；
右边距：20px；
填充：10px；
}
.n-按钮-红色{
颜色：#fff；
背景色：#d45659；
大纲：无；
边框：1px实心#c04c4f；
边界半径：4px；
宽度：20%；
最小宽度：120px；
右边距：40px；
填充：10px；
}
.n-close{
字号：500；
颜色：#fff；
文本对齐：右对齐；
填充：15px 15px 0px 0px；
}
.n-close:悬停{
光标：指针；
颜色：#f8f4ff；
}

X
大字标题

一些文本

迪克林
接受

试试这个代码片段，我希望它能帮助你改变类n-wrapper

.n-wrapper {
  width:60%;
  padding:20px;
  margin:0px auto;
  top : 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
}

*{填充：0；边距：0；}
身体{
背景色：#423a4a；
}
.n-wrapper{
宽度：60%；
填充：20px；
保证金：0px自动；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
位置：固定；
}
n-内容{
宽度：100%；
最小高度：120px；
背景色：#d45659；
盒影：0.15px 1px rgba（0,0,0,0.4）；
框大小：边框框；
溢出：隐藏；
}
.n-h1{
颜色：#fff；
字体大小：22px；
边框底部：1px实心#c04c4f；
填充：5px25px；
}
.n-p{
颜色：#fff；
字号：18px；
边框顶部：1px实心#ff686c；
填充：30px；
}
.n按钮{
宽度：100%；
背景色：#fff；
文本对齐：右对齐；
填充：20px；
}
.n-按钮-白色{
颜色：#fff；
大纲：无；
背景色：#bfbf；
边框：1px实心#A9A9；
边界半径：4px；
宽度：20%；
最小宽度：120px；
右边距：20px；
填充：10px；
}
.n-按钮-红色{
颜色：#fff；
背景色：#d45659；
大纲：无；
边框：1px实心#c04c4f；
边界半径：4px；
宽度：20%；
最小宽度：120px；
右边距：40px；
填充：10px；
}
.n-close{
字号：500；
颜色：#fff；
文本对齐：右对齐；
填充：15px 15px 0px 0px；
}
.n-close:悬停{
光标：指针；
颜色：#f8f4ff；
}

X
大字标题

一些文本

迪克林
接受

用以下代码替换

.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;
 }

---

用以下代码替换

.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;
 }

---

这可能会给你一个想法：

*{填充：0；边距：0；}
身体{
背景色：#423a4a；
}
.交叉img{
位置：绝对位置；
宽度：100px；
高度：100px；
z指数：2；
右：10px；
顶部：-30px；
不透明度：0.3；
}
.交叉img img{
宽度：100%；
身高：100%；
背景色：透明；
}
.n-wrapper{
宽度：60%；
填充：20px；
}
n-内容{
位置：相对位置；
宽度：100%；
最小高度：120px；
背景色：#d45659；
盒影：0.15px 1px rgba（0,0,0,0.4）；
框大小：边框框；
溢出：隐藏；
}
.n-h1{
颜色：#fff；
字体大小：22px；
边框底部：1px实心#c04c4f；
填充：5px25px；
}
.n-p{
颜色：#fff；
字号：18px；
边框顶部：1px实心#ff686c；
填充：30px；
}
.n按钮{
宽度：100%；
背景色：#fff；
文本对齐：右对齐；
填充：20px；
}
.n-按钮-白色{
颜色：#fff；
大纲：无；
背景色：#bfbf；
边框：1px实心#A9A9；
边界半径：4px；
宽度：20%；
最小宽度：120px；
右边距：20px；
填充：10px；
}
.n-按钮-红色{
颜色：#fff；
背景色：#d45659；
大纲：无；
边框：1px实心#c04c4f；
边界半径：4px；
宽度：20%；
最小宽度：120px；
右边距：40px；
填充：10px；
}
.n-close{
z指数：50
字号：500；
颜色：#fff；
文本对齐：右对齐；
填充：15px 15px 0px 0px；
}
.n-close:悬停{
光标：指针；
颜色：#f8f4ff；
}

X
大字标题

一些文本

迪克林
接受

这可能会给你一个想法：

*{填充：0；边距：0；}
身体{
背景色：#423a4a；
}
.交叉img{
位置：绝对位置；
宽度：100px；
高度：100px；
z指数：2；
右：10px；
顶部：-30px；
不透明度：0.3；
}
.交叉img img{
宽度：100%；
身高：100%；
背景色：透明；
}
.n-wrapper{
宽度：60%；
填充：20px；
}
n-内容{
位置：相对位置；
宽度：100%；
最小高度：120px；
背景色：#d45659；
盒影：0.15px 1px rgba（0,0,0,0.4）；
框大小：边框框；
溢出：隐藏；
}
.n-h1{
颜色：#fff；
字体大小：22px；
边框底部：1px实心#c04c4f；
填充：5px25px；
}
.n-p{
颜色：#fff；
字号：18px；
边框顶部：1px实心#ff686c；
填充：30px；
}
.n按钮{
宽度：100%；
背景色：#fff；
文本对齐：右对齐；
填充：20px；
}
.n-按钮-白色{
颜色：#fff；
大纲：无；
背景色：#bfbf；
边框：1px实心#A9A9；
边界半径：4px；
宽度：20%；
最小宽度：120px；
右边距：20px；
填充：10px；
}
.n-按钮-红色{
颜色：#fff；
背景色：#d45659；
大纲：无；
边框：1px实心#c04c4f；
边境地区