Question

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

我已经创建了一个关于我到目前为止的代码的小提琴，稍后我将添加JavaScript以在按下phpinfo()时关闭消息框：

我正在拍摄的照片：

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

Answer 2

尝试使用此代码段我希望这可以帮助您更改类 n-wrapper 中的更改。

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

＆＃13;

* {padding:0; margin:0;}
body {
  background-color:#423a4a;
}

.n-wrapper {
	width:60%;
	padding:20px;
  margin:0px auto;
  top : 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
}

.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;
}

.n-h1 {
	color:#fff;
	font-size:22px;
	border-bottom:1px solid #c04c4f;
	padding:5px 25px;
}

.n-p {
	color:#fff;
	font-size:18px;
	border-top:1px solid #ff686c;
	padding:30px;
}

.n-button {
	width:100%;
	background-color:#fff;
	text-align:right;
	padding:20px;
}

.n-button-white {
	color:#fff;
	outline:none;
	background-color:#bfbfbf;
	border:1px solid #a9a9a9;
	border-radius:4px;
	width:20%;
	min-width:120px;
	margin-right:20px;
	padding:10px;
}
.n-button-red {
	color:#fff;
	background-color:#d45659;
	outline:none;
	border:1px solid #c04c4f;
	border-radius:4px;
	width:20%;
	min-width:120px;
	margin-right:40px;
	padding:10px;
}

.n-close {
	font-weight:500;
	color:#fff;
	text-align:right;
	padding:15px 15px 0px 0px;
}

.n-close:hover {
	cursor:pointer;
	color:#f8f4ff;
	
}

＆＃13;

<div class="n-wrapper">
	<div class="n-content">
		<div class="n-close">X</div>

		<h1 class="n-h1">Headline</h1>
		
		<p class="n-p">
			some text
		</p>

		<div class="n-button">
			<button class="n-button-white">Dicline</button>
			<button class="n-button-red">Accept</button>
		</div>
	</div>
</div>

＆＃13;

Answer 3

这可能会给你一个想法：

＆＃13;

* {padding:0; margin:0;}
body {
  background-color:#423a4a;
}

.cross-img{
  position: absolute;
   width: 100px;
   height: 100px;
   z-index: 2;
   right: 10px;
   top: -30px;
   opacity: 0.3;
}

.cross-img img{
  width: 100%;
  height: 100%;
  background-color : transparent;
}

.n-wrapper {
	width:60%;
	padding:20px;
}

.n-content {
  position: relative;
	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;
}

.n-h1 {
	color:#fff;
	font-size:22px;
	border-bottom:1px solid #c04c4f;
	padding:5px 25px;
}

.n-p {
	color:#fff;
	font-size:18px;
	border-top:1px solid #ff686c;
	padding:30px;
}

.n-button {
	width:100%;
	background-color:#fff;
	text-align:right;
	padding:20px;
}

.n-button-white {
	color:#fff;
	outline:none;
	background-color:#bfbfbf;
	border:1px solid #a9a9a9;
	border-radius:4px;
	width:20%;
	min-width:120px;
	margin-right:20px;
	padding:10px;
}
.n-button-red {
	color:#fff;
	background-color:#d45659;
	outline:none;
	border:1px solid #c04c4f;
	border-radius:4px;
	width:20%;
	min-width:120px;
	margin-right:40px;
	padding:10px;
}

.n-close {
  z-index: 50
	font-weight:500;
	color:#fff;
	text-align:right;
	padding:15px 15px 0px 0px;
}

.n-close:hover {
	cursor:pointer;
	color:#f8f4ff;
	
}

＆＃13;

<div class="n-wrapper">
	<div class="n-content">
  <div class="cross-img">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTUYyXH9xufRPuLvuln6MiroZuUJ9rlTaqaJ2mOo0kgEths4JxL">
</div>
		<div class="n-close">X</div>

		<h1 class="n-h1">Headline</h1>
		
		<p class="n-p">
			some text
		</p>

		<div class="n-button">
			<button class="n-button-white">Dicline</button>
			<button class="n-button-red">Accept</button>
		</div>
	</div>
</div>

＆＃13;

Answer 4

你也可以像这样使用。 .net-content 类，包含以下代码。

.n-content {
    width:100%;
    min-height:120px;
    background: #d45659 url(top-right.png) no-repeat top right;
    box-shadow:0 0 15px 1px rgba(0, 0, 0, 0.4);
    box-sizing:border-box;
    overflow:hidden;
}

图标作为右上角的背景

4 个答案: